Omówienie znaczników

Wybierz platformę: Android iOS JavaScript

Używaj znaczników, aby wyświetlać pojedyncze lokalizacje na mapie. Z tego przewodnika dowiesz się, jak używać znaczników zaawansowanych. Dzięki znacznikom zaawansowanym możesz tworzyć i dostosowywać bardzo wydajne znaczniki oraz udostępniać znaczniki, które reagują na zdarzenia gmp-click i dane wprowadzane z klawiatury. Aby jeszcze bardziej dostosować znaczniki, możesz użyć niestandardowego kodu HTML i CSS, co pozwoli Ci tworzyć całkowicie niestandardowe znaczniki. W przypadku aplikacji 3D możesz kontrolować wysokość, na której pojawia się znacznik. Znaczniki zaawansowane są obsługiwane zarówno na mapach rastrowych, jak i mapach wektorowych (choć niektóre funkcje nie są dostępne na mapach rastrowych). Do korzystania z zaawansowanych znaczników wymagany jest identyfikator mapy (można użyć DEMO_MAP_ID).

Pierwsze kroki z zaawansowanymi znacznikami

Dostosowywanie koloru, skali i obrazu ikony

Możesz dostosować tło, glif i kolor obramowania znacznika domyślnego oraz dostosować jego rozmiar.

Zrzut ekranu przedstawiający kilka niestandardowych znaczników.

Zastąp domyślną ikonę znacznika niestandardowym obrazem SVG lub PNG.

Zrzut ekranu pokazujący niestandardowe znaczniki SVG.

Tworzenie niestandardowych znaczników HTML

Używaj niestandardowego kodu HTML i CSS, aby tworzyć wyróżniające się wizualnie interaktywne znaczniki i animacje.

Zrzut ekranu pokazujący niestandardowy znacznik HTML.

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 i zachowania znaczników przy 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 etykietą mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.

Zrzut ekranu przedstawiający znacznik dostosowany do wysokości.

Następny krok