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;
JavaScript
// This example adds a map using web components. function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
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; }
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>
Thử mẫu
Trong ví dụ này có một vài điều cần lưu ý:
- 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.
- Bản trình bày bản đồ được xác định bằng phần tử tuỳ chỉnh
<gmp-map>
. - 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>
. - 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;
JavaScript
// This example adds a map with markers, using web components. function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
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; }
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>
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;
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;
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; }
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>
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
- Yêu cầu tính năng và báo cáo lỗi trong công cụ theo dõi lỗi của Maps JavaScript API.
- 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ư tổng quan về địa điểm.