Ta strona przedstawia sposób kontrolowania następujących aspektów znaczników zaawansowanych:
- Ustaw zachowanie znacznika w przypadku kolizji
- Ustaw wysokość znacznika
- Sterowanie widocznością znacznika na podstawie poziomu powiększenia mapy
Ustaw zachowanie znacznika w przypadku kolizji
Zachowanie podczas kolizji określa sposób wyświetlania znacznika w przypadku, gdy zderza on (nachodzi) z innym znacznikiem. Zachowanie przy kolizjach jest obsługiwane tylko na mapach wektorowych.
Aby ustawić zachowanie przy kolizji, ustaw AdvancedMarkerElement.collisionBehavior
na jedną z tych opcji:
REQUIRED
: (ustawienie domyślne) znacznik zawsze jest wyświetlany niezależnie od kolizji.OPTIONAL_AND_HIDES_LOWER_PRIORITY
Wyświetlaj znacznik tylko wtedy, gdy nie nakłada się na inne znaczniki. Jeśli 2 znaczniki tego typu będą się nakładać, wyświetlany jest ten o wyższej wartościzIndex
. JeślizIndex
mają tę samą wartość, wyświetli się ten, który wyświetla się u dołu ekranu w pionie.REQUIRED_AND_HIDES_OPTIONAL
Zawsze wyświetlaj znacznik niezależnie od kolizji i ukrywaj wszystkie znacznikiOPTIONAL_AND_HIDES_LOWER_PRIORITY
oraz etykiety, które mogłyby się z nim pokrywać.
Poniższy przykład pokazuje ustawianie sposobu kolizji dla znacznika:
TypeScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
JavaScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
Ustaw wysokość znacznika
Na mapach wektorowych można ustawić wysokość, na której wyświetlany jest znacznik. Jest to przydatne, gdy znaczniki są poprawnie wyświetlane na podstawie zawartości mapy 3D. Aby ustawić wysokość znacznika, podaj LatLngAltitude
jako wartość opcji 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, });
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 }, });
Sterowanie widocznością znacznika na podstawie poziomu powiększenia mapy
Sprawdź zmianę widoczności znaczników (rozpocznij od pomniejszenia):
Aby sterować widocznością znacznika zaawansowanego, utwórz detektor zoom_changed
i dodaj funkcję warunkową, aby ustawić AdvancedMarkerElement.map
na null
, jeśli powiększenie przekracza określony poziom, jak pokazano w poniższym przykładzie:
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; } });
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; } });