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ị các vị trí riêng 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 và bằng cách sử dụng các phần tử HTML tuỳ chỉnh.

Tải thư viện điểm đánh dấu nâng cao

Để thêm một đ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 cả trường hợp ứng dụng của bạn tải các điểm đánh dấu theo phương thức lập trình hoặc bằng cách sử dụng HTML. Để làm được việc này, trước tiên, ứng dụng của bạn phải tải API JavaScript của Maps.

Phương thức bạn 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ạ ở đâ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. Thao tác này sẽ nhập cả AdvancedMarkerElement và PinElement.

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

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

Để thêm một đ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 một 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>
index.html

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

Ví dụ này minh hoạ 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.
async function initMap(): Promise<void> {
    console.log('Maps JavaScript API loaded.');
}
declare global {
    interface Window {
      initMap: () => void;
    }
  }
window.initMap = initMap;
index.ts

JavaScript

// This example adds a map with markers, using web components.
async function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = initMap;
index.js

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;
}

style.css

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>
index.html

Dùng thử mẫu

Thêm một điểm đánh dấu theo phương thức lập trình

Để thêm một đ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à một tham chiếu đến bản đồ cơ sở, như minh hoạ trong ví dụ này:

  const marker = new AdvancedMarkerElement({
      map,
      position: { lat: 37.4239163, lng: -122.0947209 },
  });

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

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

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

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();
index.ts

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();
index.js

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;
}

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>
  </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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

Dùng thử mẫu

Các bước tiếp theo