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. Na możesz tworzyć i dostosowywać zaawansowane znaczniki Znaczniki wydajności i udostępnianie znaczników reagujących na zdarzenia kliknięcia DOM i metodę wprowadzania z klawiatury. Jeszcze dokładniejsze możliwości dostosowania: zaawansowane znaczniki obsługują niestandardowy kod HTML i CSS, łącznie z tworzeniem całkowicie niestandardowych znaczników. Do aplikacji 3D możesz 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 ikony

Dostosuj tło, glif i obramowanie znacznika domyślnego kolor i 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

Użyj niestandardowego kodu HTML i CSS, aby uzyskać wyróżniające się elementy wizualne i 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 na klawiaturze, dodaj parametr 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ł on poprawnie wyświetlany elementów mapy 3D oraz określić, jak powinien zachowywać się znacznik w przypadku zderzeń z inny znacznik lub etykietę mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.

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

Następny krok