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ử (như hiển thị điểm xếp hạng theo sao cho một địa điểm) đế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 API JavaScript của Maps.

Để 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 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 cho thấy bản đồ của khu vực San Jose.

bản đồ khu vực San Jose

HTML

<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

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

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

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 đã 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 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>.
  4. Bạn có thể áp dụng kiểu cùng dòng cho các phần tử tùy 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 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ế DEMO_MAP_ID định kiểu bản đồ trên đám mây 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, vui lòng truy cập vào bài viết Tạo kiểu cho Maps trên đám mây.

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

Giống như một người có thể lồng các thẻ HTML tích hợp sẵn để tạo hệ phân cấp nội dung phức tạp, bạn 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 đồ.

bản đồ có điểm đánh dấu

HTML

<html>
  <head>
    <title>Simple Map with Markers</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </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>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

Ở đâ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ử đã 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 đượ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 Bản đồ hoặc Điểm đánh dấu nâng cao, chẳng hạn như lượt nhấp vào điểm đánh dấu.

sự kiện nhấp vào điểm đánh dấu

HTML

<html>
<head>
  <title>Google Maps - Marker Click Example</title>
  <link rel="stylesheet" href="style.css" type="text/css">

  <script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
  </script>

  <script>
    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} = await google.maps.importLibrary("maps");
            const infoWindow = new InfoWindow({
              content: advancedMarker.title
            });
            infoWindow.open({
              anchor: advancedMarker
            });
          });
        });
      }
    }
  </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>

</body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

Trong ví dụ này, initMap đại diện cho hàm callback bắt buộc sau khi API JavaScript của Maps 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 mỗi điểm đánh dấu được nhấp vào.

Các bước tiếp theo