Użyj znaczników do wyświetlania pojedynczych lokalizacji na mapie. Z tego przewodnika dowiesz się,
jak korzystać z zaawansowanych znaczników. Za pomocą
zaawansowanych znaczników można tworzyć i dostosowywać bardzo skuteczne znaczniki oraz udostępniać dostępne znaczniki, które reagują na zdarzenia kliknięcia DOM i dane wejściowe za pomocą klawiatury. Aby zapewnić jeszcze większe dostosowanie, znaczniki zaawansowane obsługują użycie niestandardowego kodu HTML i CSS, a także tworzenie całkowicie niestandardowych znaczników. W aplikacjach 3D
można 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 ikon
Dostosuj domyślny kolor tła, glifu i obramowania oraz rozmiar znacznika.
Zastąp domyślną ikonę znacznika niestandardowym obrazem SVG lub PNG.
Tworzenie niestandardowych znaczników HTML
Za pomocą niestandardowego kodu HTML i CSS możesz tworzyć charakterystyczne interaktywne znaczniki oraz tworzyć animacje.
Spraw, aby znaczniki reagują na kliknięcia i zdarzenia klawiatury
Aby znacznik odpowiadał na kliknięcia i zdarzenia klawiatury, dodaj 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ł prawidłowo wyświetlany z elementami mapy 3D, i określ, jak znacznik ma się zachowywać, gdy koliduje z innym znacznikiem lub inną etykietą mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.