Contrôler le comportement en cas de collision et la visibilité des repères

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

Définir le comportement en cas de collision pour un repère
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 en cas de collision pour un repère

Le comportement en cas de collision définit la façon dont un repère s'affiche s'il entre en collision avec un autre repère (ils se chevauchent). Cette fonctionnalité n'est compatible qu'avec les cartes vectorielles.

Pour définir le comportement en cas de collision, définissez AdvancedMarkerView.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 google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});index.ts

JavaScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  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 pinView = new google.maps.marker.PinView({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    content: pinView.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 pinView = new google.maps.marker.PinView({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new google.maps.marker.AdvancedMarkerView({
  map,
  content: pinView.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

La visibilité des repères change (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 AdvancedMarkerView.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.
        markerView01.map = zoom > 14 ? map : null;
        markerView02.map = zoom > 15 ? map : null;
        markerView03.map = zoom > 16 ? map : null;
        markerView04.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.
    markerView01.map = zoom > 14 ? map : null;
    markerView02.map = zoom > 15 ? map : null;
    markerView03.map = zoom > 16 ? map : null;
    markerView04.map = zoom > 17 ? map : null;
  }
});index.js

Étapes suivantes

Rendre les repères cliquables et accessibles