在本文档中,您将了解如何使用 Nearby Search(新)API 构建简单且经济高效的
本地搜索体验。
本地发现体验会向用户显示您在搜索酒店或房地产时指定位置附近的主要景点。它通常由互动式地图以及一个包含地点选择器和照片库的附加面板组成。您将看到各种 Google Maps Platform 产品和功能,以增强互动体验。
应用场景
现在,我们来了解哪些本地发现集成元素可带来用户价值:
发现 - 显示各种类型的相关地点,让用户大致了解单个营业地点周围的环境。
互动性 - 让用户能够选择地点并动态刷新数据
。
可视化图表 - 提供地点评价和照片
以及步行时间和距离,以便用户快速了解其是否符合自己的需求。
参考架构
本地发现
您可以通过多种方式打造本地探索体验。以下集成是用户体验的自定义示例,该示例利用了广为人知的 Google Maps Platform API 以及一些出色的新功能。如果您希望采用模板化方法进行本地发现,可以使用 Web 组件。
示例应用
示例演示
在下表中,您可以将示例应用分成多个步骤,并针对 Google Maps Platform API 的技术实现进行说明。
1. 使用 AutocompleteSearch 位置功能搜索位置
- 加载 Maps JavaScript API。
- 地点自动补全功能,用于在地图上查询或选择位置。
2. 使用 Nearby Search(新)API 显示本地地图注点
- 热门程度排名(相关度更高的结果)或距离排名。
includedTypes
、excludedTypes
;如果您是一家酒店,则可以排除“住宿”类型,只添加合适的类型,例如:“餐厅、咖啡馆、公园、tourit_attraction”。- 利用
includedPrimaryTypes
、excludedPrimaryTypes
更好地控制结果。 - `locationRestriction 用于避免结果数量不足或位置过远;如果结果为零,请在显示结果之前增大圆形 / 矩形的大小。
预订酒店且请求了数据字段时的查询示例:
- 基本(
displayName
、types
、openingHours
、formattedAddress
) - 联系人(
websiteUri
,nationalPhoneNumber
,internationalPhoneNumber
) - 首选(
reviews
、priceLevel
、userRatingCount
)
{ "includedTypes": ["restaurant","cafe","park"], "excludedTypes": ["lodging","convenience_store"], "includedPrimaryTypes": ["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes": ["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": { "center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }
搜索房地产时包含请求的数据字段的查询示例:
- 基本(
displayName
、types
、openingHours
、formattedAddress
)
{ "includedTypes": ["school","transport","bus","convenience_store"], "excludedTypes": ["lodging"], "includedPrimaryTypes": ["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes": ["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": { "center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }
3. 使用 Dynamic Maps 和 Directions API 添加互动
- 通过查询 Directions API 获取了最新的路程和步数。 * 请在下一部分中使用时间。
4. 在互动时显示地点的详细信息
说明:
displayName
、types
、rating
、userRatingCount
、priceLevel
。时间:来自之前的 Directions API 查询。
评价:
reviews[i].author
、reviews[i].rating
、reviews[i].text
。图片:在 Nearby Search(新)API 的无限制预览期间,您必须使用
place.id
查询地点详情,以获取 photo_reference,然后在您的体验中一次查询一张图片
相关查询数量和费用
- Maps JavaScript API:体验加载时 1 个地图。
- Places Autocomplete API:针对输入的每个字符执行 1 次查询(如果使用 Autocomplete widget),但可以自定义该 API。
- Nearby Search(新)API:每显示 20 个地点执行 1 次查询。根据查询响应中包含的地点数据进行不同的结算方式。
- Directions API:针对用户选择的每个地点执行 1 次查询。
- Place Photo API:对显示的每张照片执行 1 次查询。
总结
本地发现体验是为用户带来价值的有效方式。本演示实现中包含许多功能,当您在 Google Maps Platform 上利用 Nearby Search(新)API 的特殊功能打造此类体验时,可能会包含这些功能。
后续步骤
建议深入阅读:
- Maps JavaScript API 中的 Web 组件
- 地点自动补全优化
- 其他地点服务
- 请在下方留言反馈。
贡献者
主要作者:
Thomas Anglaret | Google Maps Platform 解决方案工程师