Omówienie znaczników

Wybierz platformę: Android iOS JavaScript

Użyj znaczników do wyświetlania pojedynczych lokalizacji na mapie. Z tego przewodnika dowiesz się, jak korzystać z zaawansowanych znaczników. Za pomocą zaawansowanych znaczników można tworzyć i dostosowywać bardzo skuteczne znaczniki oraz udostępniać dostępne znaczniki, które reagują na zdarzenia kliknięcia DOM i dane wejściowe za pomocą klawiatury. Aby zapewnić jeszcze większe dostosowanie, znaczniki zaawansowane obsługują użycie niestandardowego kodu HTML i CSS, a także tworzenie całkowicie niestandardowych znaczników. W aplikacjach 3D można kontrolować wysokość, na której pojawia się znacznik. Zaawansowane znaczniki są obsługiwane zarówno w mapach rastrowych, jak i wektorowych (choć niektóre funkcje są niedostępne w mapach rastrowych). Do korzystania ze znaczników zaawansowanych wymagany jest identyfikator mapy (można użyć obiektu DEMO_MAP_ID).

Pierwsze kroki ze znacznikami

Dostosuj kolor, skalę i obraz ikon

Dostosuj domyślny kolor tła, glifu i obramowania oraz rozmiar znacznika.

Zrzut ekranu przedstawiający niektóre niestandardowe znaczniki.

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

Zrzut ekranu przedstawiający niestandardowe znaczniki SVG.

Tworzenie niestandardowych znaczników HTML

Za pomocą niestandardowego kodu HTML i CSS możesz tworzyć charakterystyczne interaktywne znaczniki oraz tworzyć animacje.

Zrzut ekranu z niestandardowym znacznikiem HTML.

Spraw, aby znaczniki reagują na kliknięcia i zdarzenia klawiatury

Aby 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 sposób 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 inną etykietą mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.

Zrzut ekranu ze znacznikiem z dostosowaną wysokością.

Następny krok