Migracja do zaawansowanych znaczników

21 lutego 2024 r. (wersja 3.56) wycofaliśmy znacznik google.maps.Marker. Zachęcamy do przejścia na nową klasę google.maps.marker.AdvancedMarkerElement. Znaczniki zaawansowane zapewniają znaczne ulepszenia w porównaniu z dotychczasową klasą google.maps.Marker. Więcej informacji o wycofywaniu znaczników

Aby zaktualizować dotychczasowy znacznik do znacznika zaawansowanego, wykonaj te czynności:

  1. Dodaj kod, aby zaimportować bibliotekę znaczników (patrz kroki poniżej).
  2. Zmień google.maps.Marker na google.maps.marker.AdvancedMarkerElement;jeśli instrukcja importu deklaruje AdvancedMarker, możesz pominąć kwalifikowanąścieżkę.
  3. Dodaj identyfikator mapy do kodu inicjującego mapę. Na przykład mapId: 'DEMO_MAP_ID' na potrzeby testowania, jeśli nie masz jeszcze identyfikatora mapy.

Dodawanie biblioteki znaczników zaawansowanych

Metoda wczytywania bibliotek zależy od tego, jak strona wczytuje Maps JavaScript API.

  • Jeśli strona korzysta z dynamicznego importu biblioteki, dodaj bibliotekę znaczników i zaimportuj AdvancedMarkerElement (opcjonalnie PinElement) w czasie działania, jak pokazano tutaj.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Jeśli strona korzysta z dotychczasowego tagu wczytywania skryptu bezpośredniego, dodaj libraries=marker do skryptu wczytywania, jak pokazano w tym fragmencie kodu.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Więcej informacji o wczytywaniu Maps JavaScript API

Przykłady

Poniższe przykłady kodu pokazują kod dodawania dotychczasowego znacznika, a następnie kod tego samego przykładu z użyciem znaczników zaawansowanych:

Przed migracją

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

Po migracji

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"),  {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});

// The advanced marker, positioned at Uluru
const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

Odkrywanie funkcji znaczników zaawansowanych

Znaczniki zaawansowane można dostosowywać w sposób, który wcześniej nie był możliwy. Teraz możesz dostosować rozmiar (skalę) znaczników oraz zmienić kolory tła, obramowania i glifu. Praca z niestandardowymi obrazami graficznymi jest prostsza, a teraz można tworzyć niestandardowe znaczniki za pomocą kodu HTML i CSS. Więcej informacji o wszystkich możliwościach znaczników zaawansowanych: