在本文档中,您将了解如何使用 Nearby Search(新)API 更改为 打造简单且经济实惠的
本地发现体验。
本地发现体验可向用户显示某个地点附近的主要景点 。它通常由 还有一个包含地点选择器和 图库中的照片。您会看到不同的 Google Maps Platform 产品和功能,以增强互动体验。
使用场景
现在,我们来了解一下本地发现集成的哪些元素能够吸引用户 值:
探索 - 让用户大致了解某个营业地点周围的环境 显示各种类型的相关地点。
互动 - 让用户能够选择地点并动态刷新数据
该位置的相对位置
可视化 - 提供地点评价、照片
以及步行时间和距离 以便用户快速了解其是否适合 满足自己的需求
参考架构
本地发现
您可以通过多种方式打造本地用户发现体验。以下集成是一个自定义示例,展示了如何利用众所周知的 Google Maps Platform API 以及一些令人兴奋的新功能来打造用户体验。如果您 希望通过模板化方法发现本地,可以使用网络 组件。
示例应用
演示示例
您可以在下表中找到按步骤细分的示例应用 以及 Google 地图技术实现说明 平台 API。
1. 含自动补全功能的营业地点搜索
- 加载 Maps JavaScript API。
- 使用地点自动补全查询或在地图上选择地点。
2. 使用 Nearby Search(新)API 显示本地地图注点
- 热门程度排名(更相关的结果)或距离排名。
includedTypes
、excludedTypes
;如果是酒店,则可以排除 “lodging”类型,仅包含合适的类型,例如:“餐馆、咖啡馆、公园、 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 (New) API 的不受限制预览版期间,您 必须查询地点 详细信息 使用
place.id
可获得 photo_reference 这样就能在体验中逐一查询
查询数量和相关费用
- Google 地图 JavaScript API: 加载体验时加载 1 个地图。
- Places Autocomplete API:对输入的每个字符执行 1 次查询(如果使用 自动填充 Widget) 可以进行自定义
- 附近搜索(新)API:每显示 20 个地点,计 1 次查询。根据地点,采用不同的结算方式 数据 是查询响应的一部分。
- 路线 API: 1 次查询用户所选的每个地点。
- 地点照片 API: 显示的每张照片 1 次查询。
总结
本地发现体验是一种强大的用户价值创造方式。此演示实现包含许多功能,您在 Google Maps Platform 上使用 Nearby Search(新版)API 的特殊功能打造此类体验时,可能会包含这些功能。
后续步骤
建议深入阅读:
- Maps JavaScript API 中的 Web 组件
- 地点自动补全优化
- 其他地点服务
- 欢迎在下方留言反馈。
贡献者
主要作者:
Thomas Anglaret |Google 地图 平台解决方案工程师