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 sovrapposizione per un indicatore
  • Imposta l'altitudine del marcatore
  • Controlla la visibilità degli indicatori in base al livello di zoom della mappa

Imposta il comportamento della sovrapposizione per un indicatore

Il comportamento della sovrapposizione controlla il modo in cui un indicatore viene visualizzato se si sovrappone a un altro indicatore. Il comportamento della sovrapposizione è supportato solo sulle mappe vettoriali.

Per impostare il comportamento della sovrapposizione, imposta AdvancedMarkerElement.collisionBehavior su uno dei seguenti valori:

  • REQUIRED: (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 il valore zIndex più alto. Se hanno lo stesso zIndex, viene mostrato quello con la posizione verticale dello schermo 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 sovrapporrebbero all'indicatore.

L'esempio seguente mostra l'impostazione del comportamento della sovrapposizione per un indicatore:

TypeScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

Imposta l'altitudine del marcatore

Sulle mappe vettoriali, puoi impostare l'altitudine a cui viene visualizzato un indicatore. Questo è utile per far apparire correttamente gli indicatori in relazione ai contenuti della mappa 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 marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

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

Osserva la modifica della visibilità degli indicatori (inizia con lo zoom indietro):

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

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom! > minZoom ? position : null;
    }
});

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});

Passaggi successivi

Rendi i segnaposto cliccabili e accessibili