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 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. Znaczniki zaawansowane są obsługiwane zarówno na mapach rastrowych, jak i mapach wektorowych (chociaż niektóre funkcje nie są dostępne na mapach rastrowych). Aby używać zaawansowanych znaczników, musisz mieć identyfikator mapy (możesz użyć identyfikatora DEMO_MAP_ID).

Pierwsze kroki z zaawansowanymi znacznikami

Dostosowywanie spersonalizowanych kolorów, skali i obrazu ikony

Dostosuj kolor tła, glifu i obramowania znacznika domyślnego oraz zmień rozmiar znacznika.

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żyj niestandardowego kodu HTML i CSS, aby tworzyć wyróżniające się wizualnie interaktywne znaczniki i animacje.

Zrzut ekranu przedstawiają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 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.

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

Następny krok