借助 Google Maps Platform，客户可以使用高级标记自定义地图标记的视觉设计，从而打造独特的体验。在本文档中，我们将探索客户如何更进一步，创建能够根据实时数据动态变化的标记。
地图标记是一种实用的工具，可为用户提供丰富的地图体验。标记属性（例如大小、颜色和形状）可以传达与每个标记地点相关的其他信息。在某些情况下，这些附加信息可能会动态变化，而开发者可能希望地图可视化结果随之更新，以便为用户提供新鲜感。
在本文中，我们将举例说明：一家连锁零售店想要使用地图向用户显示商店的等待时间。不过，同样的架构也可以用于许多其他用例。以下是一些其他的建议：
- 酒店客房供应情况：在显示酒店搜索结果的地图上，客房供应情况的时效性是一项重要信号，它可以在库存减少时鼓励用户预订酒店。
- 停车位空闲情况：在地图上显示停车场信息，让用户能够放心地选择到达时有停车位的目的地。
- 营业、即将打烊和已打烊的餐厅：在显示餐厅搜索结果的地图上，请务必让用户知道餐厅在他们到达时是否可能已打烊。
动态高级标记解决方案
现在，我们将逐步介绍如何使用高级标记构建地图，以便直观呈现动态数据。如前所述，该用例是一家连锁零售店利用其结账队列管理系统来估算和直观呈现用户的等待时间。这是应用架构：
第 1 步 - 确定用于定义视觉体验的属性
第一步是确定要向用户显示的一个或多个地理位置属性。在本例中，我们只会显示一个属性：每个商店位置的当前等待时间（以分钟为单位）。
下一步是选择一个或多个对应的标记属性，以直观地标注地图标记的等待时间。PinElement 规范中提供了标记属性列表。您还可以使用自定义 HTML 来实现更丰富的自定义选项。
在此示例中，我们将使用两个标记属性来直观呈现等待时间数据：
- 标记颜色：蓝色表示等待时间少于 5 分钟，黄色表示等待时间超过 5 分钟
- 标记内容（需要自定义 HTML 标记）：我们会在标记本身中添加当前等待时间（以分钟为单位）
第 2 步 - 配置与实时数据源的连接
您可以通过多种方式连接到数据源，合适的解决方案取决于您的用例和技术基础架构。在此示例中，我们使用拉取方法，即定期通过 HTTP 请求 (REST) 请求更新后的等待时间数据。在以下部分中，您将看到利用推送方法的其他架构。
为了让我们的应用能够访问来自服务器的等待时间数据，我们的架构利用了 Cloud Functions for Firebase。借助 Cloud Functions，我们可以定义一个后端函数来访问和计算这些数据。我们还在 Web 应用中添加了 Firebase 库，使我们能够通过 HTTP 请求访问 Cloud Functions 函数。
下一步是确保为用户提供最新的数据。为此，我们使用 JavaScript setInterval 函数设置了一个超时为 30 秒的计时器。每次触发计时器时，我们都会按上述方式请求更新的等待时间数据。获取新数据后，我们必须刷新地图标记的外观。下一步会详细介绍如何进行这些更改。
第 3 步 - 渲染地图标记
现在，我们可以使用高级标记在地图上渲染样式化的标记。您可以在使用 Google Maps Platform 的 Maps JavaScript API 创建的地图上呈现高级标记。使用高级标记时，请务必在 JS 地图请求中添加地图 ID 参数。
在下方显示的代码段中，我们创建了标记，并通过创建 HTML div 元素来定义标记的内容：
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
最后一步是更新每个商店的标记文本和 CSS 样式。以下代码会读取更新后的等待时间数据，并根据等待时间为每个商店图钉分配样式：
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
现在，该地图使用我们现有的等待时间 API 来直观显示用户的最新等待时间：
连接到实时数据源的其他方法
您可以通过多种方式连接到实时数据源。下面，我们将介绍两个替代方案：Firebase Cloud Messaging 和 Websocket。无论您选择哪种方法，请务必考虑以下因素，以确保您的地图工具始终保持高性能：
- 更新频率
- 数据量
- 地图视图中的标记数量
- 硬件和浏览器功能
Firebase Cloud Messaging
Firebase Cloud Messaging 是一种推送方法。采用这种方法后，每当后端更新等待时间数据时，您都会向地图应用发送更新。更新消息会触发一个回调函数，其目的是更新标记的外观和内容。
在选择此架构之前，需要考虑的一件事是，它需要为运行地图应用的每台浏览器维护一个持久的服务器连接。因此，其运行成本可能更高，在连接问题方面可能不太稳健。
WebSocket
WebSockets 是另一种基于推送的方法，可用于及时更新数据。与上一个场景类似，您可以使用 WebSocket 在后端与地图应用之间建立持久连接。这种方法的功能优势在本质上与 Firebase Cloud Messaging 类似，但可能需要执行额外的工作来配置必要的基础架构。
总结
开发者可以将实时数据源与高级标记结合使用，在 Google 地图上构建直观的可视化图表。您可以通过多种方式关联这些数据源，具体取决于地图要求、用户硬件和浏览器以及数据量。然后，集成的数据可用于实时控制高级标记的外观和风格，从而为用户提供动态的体验。
后续操作
深入阅读：
贡献者
主要作者：
Jim Leflar | Google Maps Platform 解决方案工程师
John Branigan | Google Cloud Platform 高级客户工程师
Steve Barrett | Google Maps Platform 解决方案工程师