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 korzystać z zaawansowanych znaczników. Dzięki znacznikom zaawansowanym możesz tworzyć i dostosowywać bardzo wydajne znaczniki oraz tworzyć znaczniki dostępne, które reagują na gmp-clickzdarzenia i dane wejściowe 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 określić wysokość, na której ma się pojawiać 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 (możesz użyć DEMO_MAP_ID).

Pierwsze kroki z zaawansowanymi znacznikami

Dostosowywanie koloru, skali i ikony

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

Zrzut ekranu przedstawiający niektóre dostosowane znaczniki.

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

Zrzut ekranu przedstawiający niestandardowe znaczniki SVG.

Tworzenie niestandardowych znaczników HTML

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

Zrzut ekranu przedstawiający znacznik niestandardowego tagu HTML.

Reagowanie znaczników na kliknięcia i zdarzenia klawiatury

Spraw, aby znacznik reagował na kliknięcia i zdarzenia klawiatury, dodając gmp-clickdetektor zdarzeń.

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ł prawidłowo wyświetlany z elementami mapy 3D, i określ, jak ma się zachowywać, gdy będzie się nakładać na inny znacznik lub etykietę mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.

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

Następny krok