Używaj znaczników, aby wyświetlać pojedyncze lokalizacje na mapie. Z tego przewodnika dowiesz się, jak korzystać z zaawansowanych znaczników. Dzięki zaawansowanym znacznikom możesz tworzyć i dostosowywać bardzo wydajne znaczniki oraz tworzyć znaczniki dostępne, które reagują na zdarzenia gmp-click i wprowadzanie danych z klawiatury. Aby jeszcze bardziej dostosować znaczniki, możesz użyć niestandardowego kodu HTML i CSS, w tym utworzyć całkowicie niestandardowe znaczniki. W przypadku aplikacji 3D możesz kontrolować wysokość, na której pojawia się znacznik.
Zaawansowane znaczniki są obsługiwane zarówno na mapach rastrowych, jak i wektorowych (chociaż niektóre funkcje nie są dostępne na mapach rastrowych).
Aby używać znaczników zaawansowanych, musisz mieć identyfikator mapy (DEMO_MAP_ID).
Pierwsze kroki z zaawansowanymi znacznikami
Dostosowywanie koloru, skali i ikony
Dostosuj kolor tła, glifu i obramowania znacznika domyślnego oraz zmień rozmiar znacznika.
Zastąp ikonę znacznika domyślnego niestandardowym obrazem SVG lub PNG.
Tworzenie niestandardowych znaczników HTML
Użyj niestandardowego kodu HTML i CSS, aby tworzyć wyróżniające się wizualnie interaktywne znaczniki i animacje.
Reagowanie znaczników na kliknięcia i zdarzenia klawiatury
Aby znacznik reagował na kliknięcia i zdarzenia klawiatury, dodaj detektor zdarzeń gmp-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.addEventListener('gmp-click', (event) => { // Handle the click event. // ... }); }
Ustawianie wysokości znacznika i zachowania przy kolizji
Ustaw wysokość znacznika, aby był on prawidłowo wyświetlany z elementami mapy 3D, i określ, jak znacznik ma się zachowywać, gdy zderzy się z innym znacznikiem lub etykietą mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.
