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 della sovrapposizione per un indicatore
  • Impostare l'altitudine dell'indicatore
  • Controllare la visibilità dell'indicatore in base al livello di zoom della mappa

Impostare il comportamento della sovrapposizione per un indicatore

Il comportamento della sovrapposizione controlla la modalità di visualizzazione di un indicatore se si scontra (si sovrappone) con 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: (impostazione predefinita) 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ù alto. Se hanno lo stesso zIndex, viene mostrato quello con la posizione verticale dello schermo inferiore.
  • REQUIRED_AND_HIDES_OPTIONAL : mostra sempre l'indicatore, indipendentemente dalla collisione, e nasconde tutti gli indicatori o le etichette OPTIONAL_AND_HIDES_LOWER_PRIORITY che si sovrappongono all'indicatore.

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

TypeScript

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

JavaScript

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

Impostare l'altitudine dell'indicatore

Sulle mappe vettoriali, puoi impostare l'altitudine alla quale viene visualizzato un indicatore. Questa opzione è utile per fare in modo che gli indicatori vengano visualizzati correttamente rispetto 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,
    } as google.maps.LatLngAltitudeLiteral,
});
marker.append(pin);

mapElement.append(marker);
index.ts

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

Controllare la visibilità dell'indicatore in base al livello di zoom della mappa

Per vedere la visibilità degli indicatori cambiare (inizia riducendo 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

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

JavaScript

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

Passaggi successivi

Rendere gli indicatori cliccabili e accessibili