Przegląd

Wybierz platformę: Android iOS JavaScript

Dzięki zaawansowanym znacznikom możesz tworzyć i dostosowywać bardzo skuteczne znaczniki. Dostosuj tło, obramowanie i kolor glifu domyślnego znacznika, dostosuj rozmiar znacznika i zastąp domyślną ikonę znacznika własną grafiką. Możesz utworzyć dostępne znaczniki, które reagują na zdarzenia kliknięcia DOM i wprowadzanie tekstu z klawiatury. Aby uzyskać jeszcze dokładniejsze dostosowywanie, znaczniki zaawansowane obsługują korzystanie z niestandardowego kodu HTML i CSS, w tym możliwość tworzenia znaczników niestandardowych. W przypadku aplikacji 3D można kontrolować wysokość, na której wyświetla się znacznik. Zaawansowane znaczniki są obsługiwane zarówno w mapach rastrowych, jak i wektorowych (wymagany jest identyfikator mapy).

Pierwsze kroki z zaawansowanymi znacznikami

Dostosuj kolor, skalę i obraz ikony

Dostosuj kolor tła, glifu i obramowania domyślnego znacznika oraz dostosuj 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 przedstawiający niestandardowe znaczniki SVG.

Tworzenie niestandardowych znaczników HTML

Użyj niestandardowego kodu HTML i CSS, aby tworzyć charakterystyczne wizualnie znaczniki interaktywne i tworzyć animacje.

Zrzut ekranu przedstawiający niestandardowy znacznik HTML.

Znaczniki będą reagowały na zdarzenia kliknięcia i klawiatury

Jeśli chcesz, by 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 zachowanie przy kolizji

Ustaw wysokość znacznika, aby prawidłowo wyświetlał się w elementach mapy 3D, oraz określ zachowanie znacznika w przypadku zderzenia z innym znacznikiem lub etykietą mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.

Zrzut ekranu przedstawiający znacznik z dostosowaniem wysokości.

Następny krok