Controllare il comportamento della collisione

Seleziona la piattaforma: Android iOS JavaScript

Questa pagina mostra come impostare 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.

Per impostare il comportamento della sovrapposizione, 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 tutti gli indicatori o le etichette OPTIONAL_AND_HIDES_LOWER_PRIORITY 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 mostrato quello con il valore zIndex più alto. Se hanno lo stesso zIndex, viene mostrato quello con la posizione verticale più bassa sullo schermo.

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

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

Controlla il comportamento della sovrapposizione di un'etichetta

Puoi controllare il comportamento della sovrapposizione del segnaposto e del testo dell'etichetta di un indicatore separatamente. In alcuni casi, potrebbe essere utile nascondere le etichette lasciando visibili i segnaposto 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 come impostare il 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