Controllare il comportamento della collisione

Questa pagina mostra come impostare il comportamento di collisione per un indicatore. Il comportamento di collisione controlla la modalità di visualizzazione di un indicatore in caso di collisione (sovrapposizione) con un altro indicatore.

Per impostare il comportamento di collisione, imposta collisionBehavior su uno dei seguenti valori:

• REQUIRED: mostra sempre l'indicatore indipendentemente dalla collisione
• REQUIRED_AND_HIDES_OPTIONAL: mostra sempre l'indicatore indipendentemente dalla collisione e nascondi eventuali indicatori OPTIONAL_AND_HIDES_LOWER_PRIORITY o etichette che si sovrappongono all'indicatore.
• 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 con il zIndex più alto. Se hanno lo stesso zIndex, viene visualizzato quello con la posizione dello schermo verticale più bassa.

L'esempio seguente mostra l'impostazione del comportamento di collisione per un indicatore:

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});
index.js

Controllare il comportamento della sovrapposizione di un'etichetta

Puoi controllare separatamente il comportamento di collisione del segnaposto e del testo dell'etichetta di un indicatore. In alcuni casi, potrebbe essere utile nascondere le etichette lasciando visibili i segnaposto sulla schermata per preservare il contesto. Per farlo, aggiungi un elemento <gmp-label-3d> come elemento di pari livello di <gmp-marker-3d> e collegali utilizzando l'attributo for.

Il seguente esempio di codice mostra l'impostazione del comportamento della sovrapposizione per un'etichetta separatamente da un indicatore:

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);
index.js