Gli indicatori avanzati utilizzano due classi per definire gli indicatori:
La classe AdvancedMarkerElement
fornisce i parametri di base (position
,
title
e map
) e il corso PinElement
contiene opzioni per ulteriori
personalizzazione. Il seguente snippet mostra il codice per creare un nuovo PinElement
,
e poi applicarla 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 con HTML, i parametri di base di un indicatore sono dichiarati utilizzando
l'elemento HTML gmp-advanced-marker
; qualsiasi personalizzazione che utilizza
Il corso PinElement
deve essere applicato in modo programmatico. Per farlo, il codice deve
recupera gli elementi gmp-advanced-marker
dalla pagina HTML. Le seguenti
lo snippet mostra il codice su cui eseguire query per una raccolta di elementi gmp-advanced-marker
,
e ripeti i risultati per applicare la personalizzazione dichiarata
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
![Un diagramma che mostra le parti di un indicatore avanzato.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=4&hl=it)
Aggiungi il testo del titolo
Il testo del titolo viene visualizzato quando il cursore passa sopra un indicatore. Il testo del titolo è leggibile per screen reader.
Per aggiungere il testo del titolo in modo programmatico, utilizza l'AdvancedMarkerElement.title
:
// 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 una
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.