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: visualizza sempre l'indicatore, indipendentemente dalla collisione
• REQUIRED_AND_HIDES_OPTIONAL: visualizza sempre l'indicatore, indipendentemente dalla collisione, e nasconde tutti gli indicatori o le etichette OPTIONAL_AND_HIDES_LOWER_PRIORITY che si sovrappongono all'indicatore.
• OPTIONAL_AND_HIDES_LOWER_PRIORITY: visualizza l'indicatore solo se non si sovrappone ad altri indicatori. Se due indicatori di questo tipo si sovrappongono, viene visualizzato quello con zIndex più alto. Se hanno lo stesso zIndex, viene visualizzato quello con la posizione verticale dello schermo 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 degli indicatori sullo schermo 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 di collisione 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