Contrôler le comportement en cas de collision

Cette page explique comment définir le comportement d'un repère en cas de collision. Le comportement en cas de collision détermine comment un repère s'affiche s'il entre en collision avec un autre repère (s'ils se chevauchent).

Pour définir le comportement en cas de collision, définissez collisionBehavior sur l'une des valeurs suivantes :

• REQUIRED : le repère s'affiche toujours, quelle que soit la collision.
• REQUIRED_AND_HIDES_OPTIONAL : le repère s'affiche toujours, quelle que soit la collision. Les repères ou libellés OPTIONAL_AND_HIDES_LOWER_PRIORITY qui chevauchent le repère sont masqués.
• OPTIONAL_AND_HIDES_LOWER_PRIORITY : le repère s'affiche uniquement s'il n'en chevauche pas d'autres. Si deux repères de ce type se chevauchent, celui avec le zIndex le plus élevé est affiché. S'ils ont le même zIndex, celui dont la position verticale à l'écran est la plus basse est affiché.

L'exemple suivant montre comment définir le comportement d'un repère en cas de collision :

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

Contrôler le comportement en cas de collision d'un libellé

Vous pouvez contrôler séparément le comportement en cas de collision de l'épingle et du texte du libellé d'un repère. Dans certains cas, il peut être utile de masquer les libellés tout en laissant les repères visibles à l'écran pour conserver le contexte. Pour ce faire, ajoutez un élément <gmp-label-3d> en tant que frère de <gmp-marker-3d> et associez-les à l'aide de l'attribut for.

L'exemple de code suivant montre comment définir le comportement en cas de collision pour un libellé séparément d'un repère :

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