Personalizzazione di base dell'indicatore

Seleziona la piattaforma: Android iOS JavaScript

Gli indicatori avanzati utilizzano due classi per definire gli indicatori: la classe AdvancedMarkerElement fornisce funzionalità predefinite per gli indicatori e PinElement contiene opzioni per un'ulteriore personalizzazione. Questa pagina mostra come personalizzare gli indicatori nei seguenti modi:

  • Aggiungi il testo del titolo
  • Ridimensionare l'indicatore
  • Modificare il colore dello sfondo
  • Modifica il colore del bordo
  • Cambia il colore del glifo
  • Nascondi il glifo
Diagramma che mostra le parti di un indicatore avanzato.
Figura 1: le parti di un indicatore avanzato.

Aggiungi il testo del titolo

Il titolo viene visualizzato quando il cursore passa il mouse sopra un indicatore. Il testo del titolo è leggibile dagli screen reader. Utilizza l'opzione AdvancedMarkerElement.title per aggiungere il testo del titolo a un indicatore:

TypeScript

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
index.ts

JavaScript

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js

Ridimensionare l'indicatore

Utilizza l'opzione PinElement.scale per regolare la scala di un indicatore:

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js

Modificare il colore dello sfondo

Utilizza l'opzione PinElement.background per modificare il colore di sfondo di un indicatore:

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts

JavaScript

// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js

Modifica il colore del bordo

Utilizza l'opzione PinElement.borderColor per modificare il colore del bordo di un indicatore:

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinBorder.element,
});
index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.03 },
  content: pinBorder.element,
});
index.js

Cambia il colore del glifo

Utilizza l'opzione PinElement.glyphColor per modificare il colore del glifo di un indicatore:

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.02 },
    content: pinGlyph.element,
});
index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.02 },
  content: pinGlyph.element,
});
index.js

Nascondi il glifo

Imposta l'opzione PinElement.glyph su una stringa vuota per nascondere il glifo di un indicatore:

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.01 },
    content: pinNoGlyph.element,
});
index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinNoGlyph.element,
});
index.js

In alternativa, imposta PinElement.glyphColor sullo stesso valore di PinElement.background. Questo ha l'effetto di nascondere visivamente il glifo.

Passaggi successivi: