Thêm điểm đánh dấu vào bản đồ

Chọn nền tảng: Android iOS JavaScript

Sử dụng điểm đánh dấu để hiển thị một vị trí trên bản đồ. Trang này trình bày cách thêm điểm đánh dấu vào bản đồ theo phương thức lập trình và bằng cách sử dụng các phần tử HTML tuỳ chỉnh.

• Thêm điểm đánh dấu bằng các phần tử HTML tuỳ chỉnh
• Thêm điểm đánh dấu theo phương thức lập trình

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, thư viện này cung cấp các lớp AdvancedMarkerElement và PinElement. Đ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 việc 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 API JavaScript của Maps.

• 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à tuỳ ý PinElement) trong thời gian chạy, như minh hoạ dưới đây.

  const { AdvancedMarkerElement, PinElement } = 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ư trong đoạn mã sau. Việc này sẽ khiến cả AdvancedMarkerElement và PinElement đều được nhập.

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

Đặt mã bản đồ

Bạn cần có mã bản đồ để sử dụng Điểm đánh dấu nâng cao (bạn có thể sử dụng DEMO_MAP_ID). Đặt mã bản đồ trong các tuỳ chọn bản đồ, như minh hoạ dưới đây:

const map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: 'DEMO_MAP_ID',
});

Nếu đang sử dụng thành phần web, bạn có thể đặt mã bản đồ ngay trên phần tử gmp-map:

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

Tìm hiểu thêm về mã bản đồ.

Thêm điểm đánh dấu bằng các phần tử HTML tuỳ chỉnh

Lưu ý: Một số khung như React sẽ tự động thêm và xoá các nút DOM trong quá trình kết xuất, đồng thời có thể không tương thích với việc thêm và xoá các nút DOM tương ứng của điểm đánh dấu một cách độc lập (ví dụ: khi sử dụng hàm khởi tạo và thuộc tính của API JavaScript của Maps). Trong những khung như vậy, nếu định sử dụng mã hoặc thư viện quản lý điểm đánh dấu khác, bạn có thể cần thêm và xoá điểm đánh dấu chỉ bằng cú pháp JavaScript (ví dụ: new AdvancedMarker({map})).

Để thêm điểm đánh dấu nâng cao bằng cách sử dụng các phần tử HTML tuỳ chỉnh, hãy thêm một phần tử con gmp-advanced-marker vào phần tử gmp-map. Đoạn mã sau đây cho thấy cách thêm điểm đánh dấu vào trang web:

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>
index.html

Xem mã nguồn ví dụ hoàn chỉnh

Ví dụ này cho thấy cách tạo bản đồ có điểm đánh dấu bằng HTML.

TypeScript

// This example adds a map with markers, using web components.
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

// This example adds a map with markers, using web components.
index.js

CSS

/* Note: This CSS file is intentionally blank. */
style.css

HTML

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>
index.html

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 rồi thêm điểm đánh dấu đó vào bản đồ như trong ví dụ sau:

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
index.js

Bạn chỉ có thể thêm phần tử khi sử dụng thành phần web. Nếu bạn dùng phần tử div để tải bản đồ, hãy dùng thuộc tính map để liên kết điểm đánh dấu với thực thể bản đồ như minh hoạ dưới đây:

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

const marker = new AdvancedMarkerElement({
    map: myMap,
    position: { lat: -34.397, lng: 150.644 },
});

Xoá điểm đánh dấu

Để xoá một điểm đánh dấu khỏi bản đồ, hãy đặt marker.map hoặc marker.position thành null.

// Set the map to null.
marker.map = null;

// Set the position to null.
marker.position = null;

Xem mã nguồn ví dụ hoàn chỉnh

Ví dụ này cho thấy cách thêm điểm đánh dấu vào bản đồ.

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
void init();
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Default Advanced Marker</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

Các bước tiếp theo

• Tuỳ chỉnh điểm đánh dấu cơ bản