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
. Zaawansowane znaczniki zapewniają znaczne ulepszenia w porównaniu z klasągoogle.maps.Marker
.
Więcej informacji o tym wycofaniu
Aby zaktualizować starszego znacznika na znacznik zaawansowany:
- Dodaj kod, aby zaimportować bibliotekę znaczników. Pamiętaj, że w poprzedniej wersji znaczników (
google.maps.Marker
) nie było takiego wymagania. - Zmień
google.maps.Marker
nagoogle.maps.marker.AdvancedMarkerElement
- Dodaj identyfikator mapy do kodu inicjalizacji mapy. Na przykład:
mapId: 'DEMO_MAP_ID'
na potrzeby testowania, jeśli nie masz jeszcze identyfikatora mapy.
Dodawanie biblioteki znaczników zaawansowanych
Metoda ładowania bibliotek zależy od tego, jak strona internetowa wczytuje interfejs Maps JavaScript API.
Jeśli Twoja strona internetowa korzysta z dynamicznego ładowania skryptu, dodaj bibliotekę znaczników i zaimportuj
AdvancedMarkerElement
(i opcjonalniePinElement
) w czasie wykonywania, jak pokazano na ilustracji.const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
Jeśli Twoja strona internetowa korzysta ze starszego tagu bezpośredniego ładowania skryptu, dodaj do skryptu wczytywania parametr
libraries=marker
, 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 interfejsu Maps JavaScript API
Przykłady
Poniższe przykłady kodu pokazują kod do dodawania starszego znacznika, a potem kod tego samego przykładu z użyciem zaawansowanych znaczników:
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
// 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', });
Poznawanie funkcji zaawansowanych znaczników
Znaczniki zaawansowane można dostosowywać w sposób, który wcześniej nie był możliwy. Możesz teraz dostosować rozmiar (współrzędność) znaczników oraz zmienić kolory tła, obramowania i glifu. Niestandardowe obrazy graficzne są łatwiejsze w użyciu, a teraz można tworzyć niestandardowe znaczniki za pomocą kodu HTML i CSS. Dowiedz się więcej o wszystkim, co możesz zrobić za pomocą zaawansowanych znaczników: