Contrôler le comportement en cas de collision

Sélectionnez une plate-forme : Android iOS JavaScript

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 configurer 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, et masque les repères ou libellés OPTIONAL_AND_HIDES_LOWER_PRIORITY qui le chevauchent.
  • 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',
});

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 épingles de repère visibles à l'écran pour préserver 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 d'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);