Controlla il comportamento di collisione, l'altitudine e la visibilità

Seleziona la piattaforma: Android iOS JavaScript

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 di collisione controlla il modo in cui viene visualizzato un indicatore se entra in collisione (si sovrappone) 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 mostrato quello con zIndex più elevato. Se hanno lo stesso zIndex, viene mostrata quella con la posizione sullo schermo verticale più bassa.
  • REQUIRED_AND_HIDES_OPTIONAL Mostra sempre l'indicatore indipendentemente dalla collisione e nascondi eventuali indicatori o etichette OPTIONAL_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,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});

index.js

Imposta l'altitudine dell'indicatore

Nelle mappe vettoriali, puoi impostare l'altitudine a cui viene visualizzato un indicatore. Questo è utile per visualizzare correttamente gli indicatori in relazione ai contenuti delle mappe 3D. Per impostare l'altitudine di 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,
});
index.ts

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 },
});
index.js

Controllare la visibilità degli indicatori in base al livello di zoom della mappa

Nota la modifica della visibilità degli indicatori (inizia diminuendo 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;
    }
});
index.ts

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;
  }
});
index.js

Passaggi successivi

Rendere i segnaposto cliccabili e accessibili