Użyj znaczników do wyświetlania pojedynczych lokalizacji na mapie. Na tej stronie dowiesz się, jak dodać do mapowania w sposób zautomatyzowany i za pomocą kodu HTML.
Wczytaj bibliotekę zaawansowanych znaczników
Aby można było dodać znacznik zaawansowany do mapy, kod mapy musi wczytać komponent
Biblioteka marker
. Ta zasada ma zastosowanie niezależnie od tego, czy aplikacja wczytuje znaczniki automatycznie
lub za pomocą języka HTML. Aby to zrobić, aplikacja musi najpierw
wczytać interfejs Maps JavaScript API.
Metoda wczytywania bibliotek zależy od tego, jak strona internetowa wczytuje Maps JavaScript API.
Jeśli Twoja strona korzysta z dynamicznego ładowania skryptów, dodaj bibliotekę znaczników i importuj
AdvancedMarkerElement
(i opcjonalniePinElement
) w czasie działania jako widoczne w tym miejscu.const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
Jeśli Twoja strona internetowa korzysta z tagu bezpośredniego wczytywania skryptu, dodaj
libraries=marker
do w skrypcie wczytywania, jak widać w tym fragmencie.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker" defer ></script>
deweloper
Dodawanie znacznika za pomocą kodu HTML (beta)
Aby dodać zaawansowany znacznik za pomocą kodu HTML, dodaj tag gmp-advanced-marker
element podrzędny elementu gmp-map
. Ten fragment kodu pokazuje dodawanie
za pomocą znaczników na stronę internetową:
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
Pełny przykładowy kod
TypeScript
// This example adds a map with markers, using web components. async function initMap(): Promise<void> { console.log('Maps JavaScript API loaded.'); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a map with markers, using web components. async function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } gmp-map { height: 400px; }
HTML
<html> <head> <title>Add a Map with Markers using HTML</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta" defer ></script> </body> </html>
Zobacz próbkę
Automatyczne dodawanie znacznika
Aby automatycznie dodać znacznik zaawansowany do mapy, utwórz nowy
AdvancedMarkerElement
, przekazując wartość LatLng
lub LatLngAltitude
oraz
odniesienie do mapy bazowej, jak pokazano w tym przykładzie:
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
});
Pełny przykładowy kod
TypeScript
async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; const map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: '4504f8b37365c3d0', }); const marker = new AdvancedMarkerElement({ map, position: { lat: 37.4239163, lng: -122.0947209 }, }); } initMap();
JavaScript
async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const map = new Map(document.getElementById("map"), { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: "4504f8b37365c3d0", }); const marker = new AdvancedMarkerElement({ map, position: { lat: 37.4239163, lng: -122.0947209 }, }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Default Advanced Marker</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Zobacz próbkę
Aby usunąć znacznik z mapy, ustaw markerView.map
lub position
na
null