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:

  • 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 uno di le seguenti:

  • REQUIRED: (predefinito) visualizza sempre l'indicatore indipendentemente dalla collisione.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Mostra l'indicatore solo in caso contrario si sovrappongono ad altri indicatori. Se due indicatori di questo tipo si sovrappongono, quello con zIndex più alto. Se ha lo stesso zIndex, 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 etichette OPTIONAL_AND_HIDES_LOWER_PRIORITY che si sovrappongono 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,
});
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 alla quale visualizzare un indicatore. Questo è è utile per mostrare correttamente gli indicatori rispetto 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,
});
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

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 zoom_changed listener e aggiungi una funzione condizionale per impostare AdvancedMarkerElement.map su null se lo zoom supera il livello specificato, come mostrato di seguito esempio:

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

Rendi gli indicatori cliccabili e accessibili