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 lezIndex
le plus élevé est affiché. S'ils ont le mêmezIndex
, 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ésOPTIONAL_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, });
JavaScript
const advancedMarker = new google.maps.marker.AdvancedMarkerView({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
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, });
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 }, });
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; } });
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; } });