Web 组件是一种常见的 W3C 标准，它将 HTML、CSS 和 JS 封装在可重复使用的自定义 HTML 元素中。这些可重复使用的组件广泛多样，可以是基本的功能模块（如显示地点的星级），也可以是更复杂的业务逻辑。本指南介绍了 Maps JavaScript API 中可用的 Web 组件。
如需详细了解标准本身，请参阅 Web 组件。
受众群体
本文档旨在帮助您快速着手了解 Web 组件并利用它开发应用。您需要熟悉 HTML 和 CSS 编程概念。
显示地图
若要开始了解 Web 组件，最简单的方法就是查看示例。以下示例显示了圣何塞地区的地图。
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;
}
在本示例中，请注意以下事项：
- Maps JavaScript API 是异步调用的。回调函数用于了解 API 是何时加载完成的。
- 地图的外观风格通过
<gmp-map>自定义元素进行定义。 - 您可以通过在
<gmp-map>自定义元素中指定属性来定义地图属性。 - 样式可内嵌到自定义元素中，也可在单独的 CSS 文件中声明。
设置基本地图的样式
地图 ID 是与特定地图样式或地图项相关联的标识符。若要使用可选的云配置功能，请将云端地图样式设置 DEMO_MAP_ID 替换为您自己的地图 ID。如需了解如何创建地图 ID 和配置自定义样式，请访问云端地图样式设置。
向地图添加标记
就像可以通过嵌套内置 HTML 标记来创建复杂的内容层次结构一样，您也可以在元素内部嵌套 <gmp-advanced-marker> 来显示一个或多个地图标记。
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;
}
在本例中，我们在 <gmp-map> 自定义元素内添加了 2 个 <gmp-advanced-marker> 元素。title 的文本会为指定元素提供额外的悬停文本和无障碍功能标签。
JavaScript 事件
Web 组件的一大优势在于易用性。即使对 JavaScript 或高级编程的了解有限，您也可以通过几行代码显示地图。实施后，代码将遵循其他 HTML 元素的常见模式。例如，您可以使用原生浏览器事件系统来响应地图或高级标记操作，例如标记点击。
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;
}
在此示例中，initMap 表示 Maps JavaScript API 加载完成后所需的回调函数。此函数为每个标记设置了监听器，并在用户点击每个标记时显示一个信息窗口。