Sử dụng điểm đánh dấu để hiển thị các vị trí đơn lẻ trên bản đồ. Trang này cho biết cách thêm một điểm đánh dấu vào bản đồ theo phương thức lập trình, cũng như bằng cách sử dụng HTML.
Tải thư viện điểm đánh dấu nâng cao
Để thêm điểm đánh dấu nâng cao vào bản đồ, mã bản đồ của bạn phải tải thư viện marker
. Điều này áp dụng cho dù ứng dụng của bạn tải điểm đánh dấu theo phương thức lập trình hay bằng cách sử dụng HTML. Để làm điều này, trước tiên ứng dụng của bạn phải tải Maps JavaScript API.
Phương thức bạn sử dụng để tải thư viện phụ thuộc vào cách trang web của bạn tải Maps JavaScript API.
Nếu trang web của bạn sử dụng tính năng tải tập lệnh động, hãy thêm thư viện điểm đánh dấu và nhập
AdvancedMarkerElement
(vàPinElement
(không bắt buộc)) trong thời gian chạy, như minh hoạ dưới đây.const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
Nếu trang web của bạn sử dụng thẻ tải tập lệnh trực tiếp, hãy thêm
libraries=marker
vào tập lệnh tải, như minh hoạ trong đoạn mã sau.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker" defer ></script>
dev
Thêm điểm đánh dấu bằng cách sử dụng HTML (beta)
Để thêm điểm đánh dấu nâng cao bằng cách sử dụng HTML, hãy thêm phần tử con gmp-advanced-marker
vào phần tử gmp-map
. Đoạn mã sau cho biết cách thêm điểm đánh dấu vào trang web:
<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>
Mã ví dụ đầy đủ
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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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 callback 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&callback=initMap&libraries=marker&v=beta" defer ></script> </body> </html>
Thử mẫu
Thêm điểm đánh dấu theo phương thức lập trình
Để thêm điểm đánh dấu nâng cao vào bản đồ theo phương thức lập trình, hãy tạo một AdvancedMarkerElement
mới, truyền LatLng
hoặc LatLngAltitude
và tham chiếu đến bản đồ cơ sở, như trong ví dụ sau:
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
});
Mã ví dụ đầy đủ
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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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>
Thử mẫu
Để xóa một điểm đánh dấu khỏi bản đồ, hãy đặt markerView.map
hoặc position
thành null
.