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 w przypadku zderzenia określa sposób wyświetlania znacznika w przypadku zderzenia (nakładającego się). innym znacznikiem. Zachowanie przy kolizjach jest obsługiwane tylko na mapach wektorowych.
Aby ustawić zachowanie przy kolizji, ustaw AdvancedMarkerElement.collisionBehavior
na jedną z tych wartości:
następujące:
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 jest wyświetlany nakładają się na inne znaczniki. Gdyby dwa znaczniki tego typu nakładałyby się na siebie, ten z wyższymzIndex
. JeślizIndex
ma taką samą wartość, ten z parametrem widoczna jest dolna pionowa pozycja ekranu.REQUIRED_AND_HIDES_OPTIONAL
Zawsze wyświetlaj znacznik niezależnie od kolizje i ukrywaj wszystkie znaczniki i etykiety typuOPTIONAL_AND_HIDES_LOWER_PRIORITY
które pokrywałyby się ze znacznikiem.
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. To jest
przydatne do poprawnego wyświetlania znaczników w odniesieniu do zawartości mapy 3D. Aby ustawić
wysokości znacznika, podaj LatLngAltitude
jako wartość parametru
Opcja 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
Zobacz znaczniki zmiana widoczności (rozpoczynająca od pomniejszenia):
Aby kontrolować widoczność znacznika zaawansowanego, utwórz zoom_changed
detektor i dodać funkcję warunkową, aby ustawić AdvancedMarkerElement.map
na
null
, jeśli powiększenie przekracza określony poziom, jak w tym przykładzie
przykład:
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; } });