借助 Google Maps Platform,客户可以使用高级标记来自定义地图标记的视觉设计,从而打造独特的体验。在本文档中,我们将探索客户如何更进一步,如何创建能够根据实时数据动态变化的标记。
地图标记是一款非常实用的工具,可为用户提供丰富的地图体验。标记大小、颜色和形状等标记属性可以传达关于每个标记位置的更多信息。在某些情况下,这些额外信息可能会动态变化,而开发者可能希望更新地图可视化图表,以为用户带来新鲜感。
在本文中,我们使用了一个示例来作说明:一家零售连锁店想要使用地图向用户显示商店等待时间。不过,这一架构还可用于许多其他用例。下面还提供了一些其他提示:
- 酒店客房空房情况:在显示酒店搜索结果的地图上,客房空房情况的新鲜度是一项重要信号,它可以在酒店空房数量减少时鼓励用户预订酒店。
- 停车位情况:在停车场地图上,用户可以放心地选择到达停车位的目的地。
- 餐馆正在营业、即将打烊和已经打烊:在显示餐馆搜索结果的地图上,用户必须知道某家餐馆在到达后可能已经打烊了。
动态高级标记解决方案
现在,我们来逐步了解如何使用高级标记构建地图,以直观呈现动态数据。如前所述,应用场景是一个连锁零售店,利用其结账队列管理系统来估算并直观呈现用户的等待时间。应用架构如下所示:
第 1 步 - 确定用于定义视觉体验的属性
第一步是确定要向用户显示的一个或多个地理位置属性。在本例中,我们希望仅显示一项属性:每个商店位置的当前等待时间(以分钟为单位)。
下一步是选择一个或多个对应的标记属性,以视觉方式标注地图标记上的等待时间。PinElement 规范中提供了开箱即用的标记属性列表。您还可以使用自定义 HTML,获得更丰富的自定义选项。
在此示例中,我们将使用两个标记属性来直观呈现等待时间数据:
- 标记颜色:蓝色表示等待时间少于 5 分钟,黄色表示等待时间超过 5 分钟
- 标记内容(需要自定义 HTML 标记):我们会将当前等待时间(以分钟为单位)包含在标记本身中
第 2 步 - 配置与实时数据源的连接
您可以通过多种方式连接到数据源,合适的解决方案取决于您的使用场景和技术基础架构。在本示例中,我们使用了拉取方法,即通过 HTTP 请求 (REST) 定期请求更新后的等待时间数据。在以下部分中,您将了解利用推送方法的替代架构。
为了支持应用访问服务器中的等待时间数据,我们的架构利用了 Cloud Functions for Firebase。Cloud Functions 让我们可以定义一个后端函数来访问和计算这些数据。我们还将 Firebase 库添加到 Web 应用中,让我们可以通过 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 和 Websockets。无论您选择哪种方法,都请务必考虑以下因素,以确保地图工具始终具有出色的性能:
- 更新频率
- 数据量
- 地图视图中的标记数量
- 硬件和浏览器功能
Firebase Cloud Messaging
Firebase Cloud Messaging 是一种推送方法。使用这种方法,每次在后端更新数据时,您都会向地图应用发送更新。更新消息会触发一个回调函数,其目的是更新标记的外观和内容。
在选择此架构之前需要考虑的一点是,它需要为每个运行地图应用的浏览器保持持久的服务器连接。因此,它的运行成本可能较高,并且在出现连接问题时可能不太可靠。
WebSockets
WebSockets 是另一种基于推送的方法,用于保持数据新鲜度。与上一种情况类似,您可以使用 WebSocket 在后端和地图应用之间建立持久连接。此方法的功能优势在本质上与 Firebase Cloud Messaging 类似,但在配置必要的基础架构时可能需要执行额外的工作。
总结
开发者可以结合使用实时数据源与高级标记,在 Google 地图上构建直观的可视化图表。根据地图要求、用户硬件和浏览器以及数据量,有多种方法可以连接这些数据源。集成后的数据可用于实时控制高级标记的外观和风格,从而为用户提供动态体验。
后续操作
深入阅读:
贡献者
主要作者:
Jim Leflar | Google Maps Platform 解决方案工程师
John Branigan | Google Cloud Platform 高级客户工程师
Steve Barrett | Google Maps Platform 解决方案工程师