Contrôler le comportement en cas de collision, l'altitude et la visibilité

Sélectionnez une plate-forme : Android iOS JavaScript

Cette page explique comment contrôler les aspects suivants des repères avancés :

  • Définir le comportement d'un repère en cas de collision
  • Définir l'altitude du repère
  • Contrôler la visibilité du repère par niveau de zoom sur la carte

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). Cette fonctionnalité n'est prise en charge qu'avec les cartes vectorielles.

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

  • REQUIRED (option par défaut) : le repère s'affiche toujours, quelle que soit la collision.
  • 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é.
  • REQUIRED_AND_HIDES_OPTIONAL : le repère s'affiche toujours peu importe le cas de collision. Les repères ou libellés OPTIONAL_AND_HIDES_LOWER_PRIORITY qui chevauchent le repère sont masqués.

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

TypeScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});

index.js

Définir l'altitude du repère

Sur les cartes vectorielles, vous pouvez définir l'altitude à laquelle un repère s'affiche. Cela permet d'afficher correctement les repères par rapport au contenu de la carte 3D. Pour définir l'altitude d'un repère, spécifiez LatLngAltitude comme valeur pour l'option MarkerView.position :

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

JavaScript

const pin = new PinElement({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
  map,
  content: pin.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

Contrôler la visibilité du repère par niveau de zoom sur la carte

Observez le changement de visibilité des repères (commencez par faire un zoom arrière).

Pour contrôler la visibilité d'un repère avancé, créez un écouteur zoom_changed, puis ajoutez une fonction conditionnelle pour définir AdvancedMarkerElement.map sur null si le zoom dépasse le niveau spécifié, comme indiqué dans l'exemple suivant :

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

JavaScript

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    marker01.map = zoom > 14 ? map : null;
    marker02.map = zoom > 15 ? map : null;
    marker03.map = zoom > 16 ? map : null;
    marker04.map = zoom > 17 ? map : null;
  }
});
index.js

Étapes suivantes

Rendre les repères cliquables et accessibles