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ể đa dạng từ các chức năng nguyên tử, chẳng hạn 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 này, 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ế để cho phép bạn nhanh chóng bắt đầu khám phá và phát triển các ứng dụng có 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 một 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

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

  1. API JavaScript của Maps được gọi không đồng bộ. Hàm callback được dùng để biết thời điểm API được tải.
  2. Bản trình bày bản đồ được xác định bằng phần tử tuỳ chỉnh <gmp-map>.
  3. Thuộc tính ánh xạ đượ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>.
  4. Bạn có thể áp dụng kiểu cùng dòng cho 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 được liên kết với một kiểu hoặc đối tượ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 trên 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 sẵn để tạo hệ thống 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 bên trong 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

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

Sự kiện JavaScript

Lợi ích chính của Thành phần web là dễ sử dụng. Chỉ với một vài dòng mã, bạn có thể hiển thị một Bản đồ với kiến thức hạn chế về JavaScript hoặc lập trình nâng cao. Sau khi triển khai, mã này 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 thao tác 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.

Trong HTML, hãy đặt thuộc tính gmp-clickable trên phần tử gmp-advanced-marker để tạo một điểm đánh dấu có thể nhấp vào. Sử dụng advancedMarker.addEventListener để xử lý các sự kiện nhấp chuột.

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-clickable
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
        gmp-clickable
      ></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

Trong ví dụ này, initMap biểu thị 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 mỗi điểm đánh dấu.

Các bước tiếp theo