Questa pagina mostra come controllare i seguenti aspetti degli indicatori avanzati:
- Imposta il comportamento della collisione per un indicatore
- Imposta l'altitudine dell'indicatore
- Controllo della visibilità degli indicatori per livello di zoom sulla mappa
Imposta il comportamento della collisione per un indicatore
Il comportamento della collisione controlla la modalità di visualizzazione di un indicatore in caso di collisione (sovrapposizione) con un altro indicatore. Il comportamento delle collisioni è supportato solo sulle mappe vettoriali.
Per impostare il comportamento della collisione, imposta AdvancedMarkerElement.collisionBehavior
su una delle seguenti opzioni:
REQUIRED
: (predefinito) visualizza sempre l'indicatore indipendentemente dalla collisione.OPTIONAL_AND_HIDES_LOWER_PRIORITY
Visualizza l'indicatore solo se non si sovrapponga ad altri indicatori. Se due indicatori di questo tipo si sovrappongono, viene mostrato quello con il valorezIndex
più alto. Se hanno lo stessozIndex
, viene mostrato quello con la posizione verticale inferiore sullo schermo.REQUIRED_AND_HIDES_OPTIONAL
Visualizza sempre l'indicatore indipendentemente dalla collisione e nascondi gli indicatoriOPTIONAL_AND_HIDES_LOWER_PRIORITY
o le etichette che si sovrappongano all'indicatore.
L'esempio seguente mostra l'impostazione del comportamento della collisione per un indicatore:
TypeScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
JavaScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
Imposta l'altitudine dell'indicatore
Nelle mappe vettoriali, puoi impostare l'altitudine alla quale visualizzare un indicatore. Ciò è utile per fare in modo che gli indicatori vengano visualizzati correttamente rispetto ai contenuti delle mappe 3D. Per impostare
l'altitudine per un indicatore, specifica un LatLngAltitude
come valore per
l'opzione MarkerView.position
:
TypeScript
const pin = new PinElement({ background: '#4b2e83', borderColor: '#b7a57a', glyphColor: '#b7a57a', scale: 2.0, }); const markerView = new AdvancedMarkerElement({ map, content: pin.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral, });
JavaScript
const pin = new PinElement({ background: "#4b2e83", borderColor: "#b7a57a", glyphColor: "#b7a57a", scale: 2.0, }); const markerView = new AdvancedMarkerElement({ map, content: pin.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 }, });
Controllo della visibilità degli indicatori per livello di zoom sulla mappa
Visualizza la modifica della visibilità degli indicatori (inizia diminuendo lo zoom):
Per controllare la visibilità di un indicatore avanzato, crea un listener zoom_changed
e aggiungi una funzione condizionale per impostare AdvancedMarkerElement.map
su null
se lo zoom supera il livello specificato, come mostrato nell'esempio seguente:
TypeScript
map.addListener('zoom_changed', () => { const zoom = map.getZoom(); if (zoom) { // Only show each marker above a certain zoom level. marker01.map = zoom > 14 ? map : null; marker02.map = zoom > 15 ? map : null; marker03.map = zoom > 16 ? map : null; marker04.map = zoom > 17 ? map : null; } });
JavaScript
map.addListener("zoom_changed", () => { const zoom = map.getZoom(); if (zoom) { // Only show each marker above a certain zoom level. marker01.map = zoom > 14 ? map : null; marker02.map = zoom > 15 ? map : null; marker03.map = zoom > 16 ? map : null; marker04.map = zoom > 17 ? map : null; } });