Rozpocznij

Wykonaj te czynności, aby skonfigurować zaawansowane znaczniki.

Uzyskiwanie klucza interfejsu API i włączanie interfejsu Maps JavaScript API

Aby używać zaawansowanych znaczników, musisz mieć Cloud projekt z kontem rozliczeniowym i Maps JavaScript API . Więcej informacji znajdziesz w artykule Konfigurowanie projektu Google Cloud.

Uzyskiwanie klucza interfejsu API

Utwórz identyfikator mapy

Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule: Dostosowanie chmury – Ustaw typ mapy na JavaScript i wybierz Wektor lub Raster.

Zaktualizuj kod inicjowania mapy

Wymaga to utworzonego przed chwilą identyfikatora mapy. Znajdziesz go w swoich Mapach Zarządzanie.

1. Wczytaj interfejs Maps JavaScript API.

2. Wczytaj bibliotekę zaawansowanych znaczników z poziomu async :

   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
   

3. Podaj identyfikator mapy podczas tworzenia instancji mapy za pomocą właściwości mapId. Może to być podany przez Ciebie identyfikator mapy lub DEMO_MAP_ID.

   const map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'YOUR_MAP_ID'
   });

Sprawdź możliwości mapy (opcjonalnie)

Zaawansowane znaczniki wymagają identyfikatora mapy. Jeśli brakuje identyfikatora mapy, nie można wczytać zaawansowanych znaczników. Aby rozwiązać problem, możesz dodać detektor mapcapabilities_changed, aby zasubskrybować funkcje mapy zmian. Korzystanie z funkcji Map jest opcjonalne i zalecane tylko do testowania i rozwiązywania problemów lub w przypadku działania awaryjnego środowiska wykonawczego.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

Dalsze kroki

Tworzenie domyślnego znacznika zaawansowanego