Questa pagina mostra come controllare i seguenti aspetti degli indicatori avanzati:
- Impostare il comportamento di collisione per un indicatore
- Imposta l'altitudine dell'indicatore
- Controllare la visibilità degli indicatori in base al livello di zoom della mappa
Impostare il comportamento di 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 di collisione è supportato solo nelle mappe vettoriali.
Per impostare il comportamento in caso di collisione, imposta AdvancedMarkerElement.collisionBehavior
su uno dei seguenti valori:
REQUIRED
: (valore predefinito) mostra sempre l'indicatore indipendentemente dalla collisione.OPTIONAL_AND_HIDES_LOWER_PRIORITY
Mostra l'indicatore solo se non si sovrappone ad altri indicatori. Se due indicatori di questo tipo si sovrappongono, viene visualizzato quello conzIndex
più elevato. Se ha lo stessozIndex
, quello con viene mostrata la posizione verticale inferiore dello schermo.REQUIRED_AND_HIDES_OPTIONAL
Visualizza sempre l'indicatore indipendentemente da collisione e nascondi eventuali indicatori o etichetteOPTIONAL_AND_HIDES_LOWER_PRIORITY
che si sovrappongono all'indicatore.
L'esempio seguente mostra l'impostazione del comportamento di 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. Questo è utile per visualizzare correttamente gli indicatori in relazione ai contenuti delle mappe 3D. Per impostare
l'altitudine di un indicatore, specifica LatLngAltitude
come valore per
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
Guarda gli indicatori modifica della visibilità (inizia riducendo lo zoom):
Per controllare la visibilità di un indicatore avanzato, crea un ascoltatore 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; } });