Użyj znaczników do wyświetlania pojedynczych lokalizacji na mapie. Z tego przewodnika dowiesz się, jak
używać zaawansowanych znaczników. Na
możesz tworzyć i dostosowywać zaawansowane znaczniki
Znaczniki wydajności i udostępnianie znaczników reagujących na zdarzenia kliknięcia DOM
i metodę wprowadzania z klawiatury. Jeszcze dokładniejsze możliwości dostosowania:
zaawansowane znaczniki obsługują
niestandardowy kod HTML i CSS,
łącznie z tworzeniem całkowicie niestandardowych znaczników. Do aplikacji 3D
możesz kontrolować wysokość, na której pojawia się znacznik.
Zaawansowane znaczniki są obsługiwane zarówno w mapach rastrowych, jak i wektorowych (choć niektóre funkcje są niedostępne w mapach rastrowych).
Do korzystania ze znaczników zaawansowanych wymagany jest identyfikator mapy (można użyć obiektu DEMO_MAP_ID).
Dostosuj kolor, skalę i obraz ikony
Dostosuj tło, glif i obramowanie znacznika domyślnego kolor i rozmiar znacznika.
Zastąp domyślną ikonę znacznika niestandardowym obrazem SVG lub PNG.
Tworzenie niestandardowych znaczników HTML
Użyj niestandardowego kodu HTML i CSS, aby uzyskać wyróżniające się elementy wizualne i tworzyć animacje.
Spraw, aby znaczniki reagują na kliknięcia i zdarzenia klawiatury
Aby znacznik odpowiadał na kliknięcia i zdarzenia na klawiaturze, dodaj parametr
Detektor zdarzeń click.
function initMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.4239163, lng: -122.0947209},
zoom: 17,
mapId: 'DEMO_MAP_ID',
});
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
marker.addListener('click', ({domEvent, latLng}) => {
const {target} = domEvent;
// Handle the click event.
// ...
});
}
Ustaw wysokość znacznika i sposób kolizji
Ustaw wysokość znacznika, aby był on poprawnie wyświetlany elementów mapy 3D oraz określić, jak powinien zachowywać się znacznik w przypadku zderzeń z inny znacznik lub etykietę mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.
