Trang này được dịch bởi Cloud Translation API.

Thành phần web trong API JavaScript của Maps (Xem trước)

Thành phần web là một tiêu chuẩn W3C phổ biến đóng gói HTML, CSS và JS trong các phần tử HTML tuỳ chỉnh và có thể sử dụng lại. Các thành phần có thể sử dụng lại này có thể bao gồm các chức năng ở nguyên tử, như hiển thị điểm xếp hạng theo sao cho một địa điểm, cho đến logic kinh doanh phức tạp hơn. Hướng dẫn này mô tả các Thành phần web có trong Maps JavaScript API.

Để biết thêm thông tin về tiêu chuẩn, hãy xem phần Thành phần web.

Đối tượng người xem

Tài liệu này được thiết kế để giúp bạn nhanh chóng bắt đầu khám phá và phát triển các ứng dụng bằng Thành phần web. Bạn nên làm quen với các khái niệm lập trình HTML và CSS.

Hiển thị bản đồ

Cách dễ nhất để bắt đầu tìm hiểu về Thành phần web là xem ví dụ. Ví dụ sau đây hiển thị bản đồ của khu vực San Jose.

TypeScript

// This example adds a map using web components.
function initMap(): void {
    console.log('Maps JavaScript API loaded.');
}

declare global {
    interface Window {
        initMap: () => void;
    }
}
window.initMap = initMap;index.ts

JavaScript

// This example adds a map using web components.
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 Web Component</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="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
    ></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&v=beta"
      defer
    ></script>
  </body>
</html>index.html

Thử mẫu

JSFiddle.net Google Cloud Shell

Trong ví dụ này có một vài điều cần lưu ý:

API Maps JavaScript được gọi không đồng bộ. Hàm callback được dùng để biết thời điểm API đã tải.
Việc trình bày bản đồ được xác định bằng phần tử tuỳ chỉnh <gmp-map>.
Thuộc tính bản đồ được xác định bằng cách chỉ định các thuộc tính trong phần tử tuỳ chỉnh <gmp-map>.
Bạn có thể áp dụng kiểu cùng dòng với các phần tử tuỳ chỉnh hoặc khai báo trong một tệp CSS riêng.

Tạo kiểu cho bản đồ cơ sở

Mã bản đồ là giá trị nhận dạng liên kết với một kiểu hoặc tính năng bản đồ cụ thể. Để tận dụng các tính năng cấu hình đám mây (không bắt buộc), hãy thay thế kiểu bản đồ trên đám mây DEMO_MAP_ID bằng mã bản đồ của riêng bạn. Để tìm hiểu cách tạo mã bản đồ và định cấu hình kiểu tuỳ chỉnh, hãy truy cập vào phần Tạo kiểu bản đồ trên đám mây.

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

Giống như việc có thể lồng các thẻ HTML tích hợp để tạo hệ phân cấp nội dung phức tạp, người dùng cũng có thể lồng <gmp-advanced-marker> vào một phần tử để hiển thị một hoặc nhiều điểm đánh dấu bản đồ.

TypeScript

// This example adds a map with markers, using web components.
function initMap(): 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.
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 Web Components</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">
      <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>index.html

Thử mẫu

JSFiddle.net Google Cloud Shell

Ở đây, chúng tôi đã thêm 2 phần tử <gmp-advanced-marker> vào bên trong phần tử tuỳ chỉnh <gmp-map>. Văn bản của title cung cấp thêm văn bản khi di chuột và nhãn hỗ trợ tiếp cận cho phần tử đã chỉ định.

Sự kiện JavaScript

Lợi ích chính của Thành phần web là dễ sử dụng. Chỉ cần một vài dòng mã, người dùng có thể hiển thị một Bản đồ mà chỉ cần có kiến thức hạn chế về JavaScript hoặc lập trình nâng cao. Sau khi được triển khai, mã sẽ tuân theo các mẫu quen thuộc của các phần tử HTML khác. Ví dụ: người dùng có thể sử dụng hệ thống sự kiện của trình duyệt gốc để phản ứng với các hành động trên Bản đồ hoặc Đánh dấu nâng cao, chẳng hạn như nhấp vào điểm đánh dấu.

TypeScript

// This example adds a map using web components.
function initMap(): void {
  console.log('Maps JavaScript API loaded.');
  const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker");
  for (const advancedMarker of advancedMarkers) {

    customElements.whenDefined(advancedMarker.localName).then(async () => {
      advancedMarker.addEventListener('gmp-click', async () => {

        const infoWindow = new google.maps.InfoWindow({
          //@ts-ignore
          content: advancedMarker.title,
        });
        infoWindow.open({
          //@ts-ignore
          anchor: advancedMarker
        });
      });
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

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

  const advancedMarkers = document.querySelectorAll(
    "#marker-click-event-example gmp-advanced-marker",
  );

  for (const advancedMarker of advancedMarkers) {
    customElements.whenDefined(advancedMarker.localName).then(async () => {
      advancedMarker.addEventListener("gmp-click", async () => {
        const infoWindow = new google.maps.InfoWindow({
          //@ts-ignore
          content: advancedMarker.title,
        });

        infoWindow.open({
          //@ts-ignore
          anchor: advancedMarker,
        });
      });
    });
  }
}

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 Web Component with Events</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
      id="marker-click-event-example"
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
    >
      <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>index.html

Thử mẫu

JSFiddle.net Google Cloud Shell

Trong ví dụ này, initMap đại diện cho hàm callback bắt buộc sau khi Maps JavaScript API tải hoàn toàn. Mã này thiết lập trình nghe cho từng điểm đánh dấu và hiển thị một cửa sổ thông tin khi người dùng nhấp vào từng điểm đánh dấu.

Các bước tiếp theo

Yêu cầu tính năng và báo cáo lỗi trong công cụ theo dõi lỗi API JavaScript của Maps.
Khám phá Thư viện thành phần mở rộng để biết các Thành phần web cấp cao hơn, chẳng hạn như thông tin tổng quan về địa điểm.