Gli indicatori avanzati utilizzano due classi per definire gli indicatori: la classe AdvancedMarkerElement
fornisce i parametri di base (position
, title
e map
) e la classe PinElement
contiene opzioni per un'ulteriore personalizzazione. Il seguente snippet mostra il codice per creare un nuovo PinElement
e poi applicarlo a un indicatore.
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
Nelle mappe create utilizzando HTML, i parametri di base di un indicatore vengono dichiarati utilizzando
l'elemento HTML gmp-advanced-marker
; qualsiasi personalizzazione che utilizza
la classe PinElement
deve essere applicata in modo programmatico. A questo scopo, il codice deve recuperare gli elementi gmp-advanced-marker
dalla pagina HTML. Lo snippet seguente mostra il codice da eseguire per eseguire query su una raccolta di elementi gmp-advanced-marker
, quindi ripeti i risultati per applicare la personalizzazione dichiarata in PinElement
.
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
In questa pagina viene illustrato come personalizzare gli indicatori nei seguenti modi:
- Aggiungere il testo del titolo
- Ridimensiona l'indicatore
- Cambiare il colore dello sfondo
- Cambiare il colore del bordo
- Cambiare il colore del glifo
- Nascondi il glifo
Aggiungi il testo del titolo
Il testo del titolo viene visualizzato quando il cursore passa sopra un indicatore. Il testo del titolo è leggibile dagli screen reader.
Per aggiungere il testo del titolo in modo programmatico, utilizza l'opzione AdvancedMarkerElement.title
:
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',
});
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",
});
Per aggiungere il testo del titolo a un indicatore creato con HTML, utilizza l'attributo title
:
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>
Ridimensiona l'indicatore
Per ridimensionare un indicatore, utilizza l'opzione scale
.
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,
});
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,
});
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,
});
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,
});
Modificare 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,
});
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,
});
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,
});
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,
});
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,
});
JavaScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
In alternativa, imposta PinElement.glyphColor
sullo stesso valore di PinElement.background
.
In questo modo, nasconde visivamente il glifo.
Passaggi successivi:
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2024-07-03 UTC.
[]
[]