利用高级标记和 Firebase 实时吸引客户

Google Maps Platform 允许客户通过使用高级标记自定义地图标记的视觉设计来开发独特的体验。在本文档中，我们将探讨客户如何更进一步，创建根据实时数据动态变化的标记。

主打图片显示了一张以旧金山为中心的 Google 地图 JS 地图。多个位置显示彩色标记，其内容为“2 分钟”或“4 分钟”。颜色和内容会随着时间的推移而更新。

地图标记是一种实用工具，可为用户提供丰富的地图体验。标记属性（例如大小、颜色和形状）可以传达有关每个标记位置的其他信息。在某些情况下，这些附加信息可能会动态变化，开发者可能希望地图可视化效果能够更新，从而为用户保持新鲜感。

在本文档中，我们使用一个示例进行说明：一家连锁零售店希望使用地图向用户显示商店等待时间。不过，这种架构也可用于许多其他用例。以下是一些其他想法：

酒店客房空余情况：在显示酒店搜索结果的地图上，客房空余情况的新鲜度是一个重要信号，可以鼓励用户在库存减少时预订酒店。
停车位空余情况：在停车场地图上，让用户确信他们到达时会有停车位。
餐厅营业、即将关门和已关门：在显示餐厅搜索结果的地图上，用户必须知道餐厅在他们到达时是否可能已关门。

动态高级标记解决方案

您可以使用高级标记构建地图，以直观呈现动态数据。如前所述，该用例是一家连锁零售店，利用其结账队列管理系统来估算和直观呈现用户的等待时间。这是应用架构：

架构图：用户访问 Web 应用。Web 应用 Google 基础设施（GMP 和 Firebase Cloud Functions）。
Firebase Cloud Functions 可访问客户后端中的实时数据。

第 1 步 - 确定用于定义视觉体验的属性

第一步是确定要向用户显示的一个或多个位置属性。在本例中，我们只希望显示一个属性：每个店面位置的当前等待时间（以分钟为单位）。

下一步是选择一个或多个相应的标记属性，以便在地图标记上以视觉方式注释等待时间。PinElement您还可以使用自定义 HTML 来获得更丰富的自定义选项。

在此示例中，我们将使用两个标记属性来直观呈现等待时间数据：

标记颜色：等待时间少于 5 分钟时为蓝色，超过 5 分钟时为黄色
标记内容（需要自定义 HTML 标记）：我们将在标记本身中包含当前等待时间（以分钟为单位）

第 2 步 - 配置与实时数据源的连接

您可以通过多种方式连接到数据源，而正确的解决方案取决于您的用例和技术基础架构。在本例中，我们使用的是拉取方法，即定期使用 HTTP 请求 (REST) 请求更新后的等待时间数据。在以下部分中，您将看到利用推送方法的替代架构。

为了让我们的应用能够访问服务器中的等待时间数据，我们的架构利用了 Cloud Functions for Firebase。借助 Cloud Functions，我们可以定义后端函数来访问和计算此数据。我们还在 Web 应用中添加了 Firebase 库，以便能够使用 HTTP 请求访问 Cloud Function。

下一步是确保为用户提供新鲜的数据。为此，我们使用 JavaScript setInterval 函数设置了一个计时器，超时时间为 30 秒。每次触发计时器时，我们都会如上所述请求更新后的等待时间数据。获得新数据后，我们必须刷新地图标记的外观。下一步详细介绍了如何进行这些更改。

第 3 步 - 呈现地图标记

我们现在可以使用高级标记在地图上呈现样式化的标记。高级标记可以呈现在由 Google Maps Platform's Maps Javascript API 创建的地图上。使用高级标记时，请务必在地图 ID 参数中添加 JS 地图请求。

在下面的代码段中，我们创建了标记，并通过创建 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 是一种推送方法。使用此方法，您可以在每次在后端更新等待时间数据时向地图应用发送更新。更新消息将触发一个回调函数，该函数的目的是更新标记外观和内容。

在选择此架构之前，需要考虑的一点是，它需要为运行地图应用的每个浏览器维护持久服务器连接。因此，运行成本可能会更高，并且在出现连接问题时可能不太稳定。

WebSockets

WebSockets 是另一种基于推送的方法，用于保持数据新鲜度。与之前的场景类似，您可以使用 WebSocket 在后端和地图应用之间建立持久连接。此方法的功能优势与 Firebase Cloud Messaging 类似，但可能需要额外的工作来配置必要的基础架构。

总结

开发者可以将实时数据源与高级标记相结合，在 Google 地图上构建直观的可视化效果。根据地图要求、用户硬件和浏览器以及数据量，您可以通过多种方式连接这些数据源。然后，您可以使用集成的数据实时控制高级标记的外观，从而为用户提供动态体验。

后续操作

更多阅读材料：

贡献者

主要作者：

Jim Leflar | Google Maps Platform 解决方案工程师

John Branigan | Google Cloud Platform 高级客户工程师

Steve Barrett | Google Maps Platform 解决方案工程师