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 używać 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 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 na mapach wektorowych (chociaż niektóre funkcje nie są dostępne na mapach rastrowych). Do korzystania ze znaczników zaawansowanych wymagany jest identyfikator mapy (można użyć obiektu DEMO_MAP_ID).

Pierwsze kroki z zaawansowanymi znacznikami

Dostosuj kolor, skalę i obraz ikony

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 w formacie SVG lub PNG.

Zrzut ekranu pokazujący niestandardowe znaczniki SVG.

Tworzenie niestandardowych znaczników HTML

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

Zrzut ekranu pokazujący niestandardowy znacznik HTML.

Sprawianie, aby znaczniki reagowały na zdarzenia kliknięcia i 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 wyświetlał się prawidłowo w elementach mapy 3D, i określ, jak ma się zachowywać, gdy zderzy się z innym znacznikiem lub etykietą mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.

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

Następny krok