Używaj znaczników do wyświetlania pojedynczych lokalizacji na mapie. W tym przewodniku pokazujemy,
jak używać znaczników zaawansowanych. Za pomocą znaczników zaawansowanych możesz tworzyć i dostosowywać znaczniki o wysokiej wydajności oraz udostępniać znaczniki, które reagują na zdarzenia kliknięcia w modelu DOM i wprowadzanie tekstu z klawiatury. Aby uzyskać jeszcze dokładniejsze dostosowanie, znaczniki zaawansowane obsługują korzystanie z niestandardowego kodu HTML i CSS, w tym możliwość tworzenia własnych znaczników. W przypadku aplikacji 3D
można kontrolować wysokość, na której pojawia się znacznik.
Znaczniki zaawansowane są obsługiwane zarówno na mapach rastrowych, jak i wektorowych (chociaż niektóre funkcje nie są dostępne na mapach rastrowych).
Aby korzystać z zaawansowanych znaczników, wymagany jest identyfikator mapy (można użyć DEMO_MAP_ID).
Pierwsze kroki z zaawansowanymi znacznikami
Dostosuj kolor, skalę i obraz ikony
Dostosuj kolor tła, glifu i obramowania domyślnego znacznika oraz dostosuj rozmiar znacznika.
Zastąp domyślną ikonę znacznika niestandardowym obrazem w formacie SVG lub PNG.
Tworzenie niestandardowych znaczników HTML
Użyj niestandardowego kodu HTML i CSS, aby tworzyć charakterystyczne wizualnie znaczniki interaktywne i tworzyć animacje.
Znaczniki będą reagowały na zdarzenia kliknięcia i klawiatury
Jeśli chcesz, by 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 zachowanie przy kolizji
Ustaw wysokość znacznika, aby prawidłowo wyświetlał się w elementach mapy 3D, oraz określ zachowanie znacznika w przypadku zderzenia z innym znacznikiem lub etykietą mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.
