在本文档中,您将了解如何使用 Air Quality API 打造丰富的地点搜索体验。 我们将展示从一开始到漏斗下端,空气质量如何成为用户价值的信号,以及如何将 Air Quality API 数据嵌入到现有体验中。
应用场景和附加价值
Air Quality API 信号可适应各种搜索体验,例如当用户查找要访问的地点时。Air Quality API 具有以下功能:
- 实时 * 和历史数据 - 反映当前状态以及 30 天内的过往数据(以每小时为单位)的最新准确数据。(* 每小时户外空气质量概况)
- 全球和本地数据 - 涵盖 100 多个国家/地区的所有区域,但高度本地化(高达 5 亿米)。Air Quality API 数据可为用户提供关键信号,方便用户进行比较,从而在最合适的地点做出决定。
即使是附近的地点,空气质量也可能截然不同
示例演示
尽早显示空气质量数据
显示 Air Quality API 数据的方法主要有两种:
当前条件 / 小时:获取要针对各个地理位置显示的各个值。
(前往在位置图钉上显示 Air Quality API 数据部分)热图图块:在地图上方叠加表示当前室外空气质量条件的彩色图层。可以使用特定于国家/地区的图层索引。
(前往在地图上显示 Air Quality API 热图图层部分)
在位置图钉上显示 Air Quality API 数据
- 选择您的位置指数:通用 AQI 或本地 AQI(最多可提供 70 个不同的空气质量指数 (AQI))。空气质量指数 (AQI) 是某个国家/地区(例如美国 EPA)根据不同的计算方法、数据源和指定用途对不同空气质量等级进行分类时所依据的量表。
- 开始直接在地点搜索体验中直观呈现 Air Quality API 的主要值和颜色代码。
默认显示屏只能包含颜色代码。
显示有关图钉选择的更多 Air Quality API 信息:
- 您可以根据自己的需求,调整默认显示的信息级别。请注意,通常情况下,与其他地理位置相比,某个地理位置的数据点会很有用。
空气质量版块显示示例
{ "dateTime": "2023-08-09T10:00:00Z", "regionCode": "fr", "indexes": [ { "code": "uaqi", "displayName": "Universal AQI", "aqi": 76, "aqiDisplay": "76", "color": { "red": 0.4117647, "green": 0.77254903, "blue": 0.20392157 }, "category": "Good air quality", "dominantPollutant": "pm10" }, … ], "pollutants": [ { "code": "co", "displayName": "CO", "fullName": "Carbon monoxide", "concentration": { "value": 95.18, "units": "PARTS_PER_BILLION" }... }, … ], "healthRecommendations": -{ "generalPopulation": "With this level of air quality, you have no limitations. Enjoy the outdoors!", "elderly": "If you start to feel respiratory discomfort such as coughing or breathing difficulties, consider red ...", "lungDiseasePopulation": … } }
- 或者,您也可以仅在用户与某个地点互动时查询空气质量数据。
- 您可以使用 Air Quality API 索引来过滤附近的地点,例如:如果您正在查找您所在区域的公园,那么将仅显示空气质量良好的公园。
空气质量响应
... "color":{ "red": 0.9490196, "green": 0.98039216, "blue": 0.019607844 } ...转换为 RGB
var red = parseInt(colorResponse.red*255)|| 1; var green = parseInt(colorResponse.green*255)|| 1; var blue = parseInt(colorResponse.blue*255)|| 1; // --> output rgb(241,250,5)
在地图上显示 Air Quality API 热图图层
热图彩色图块是一种很好的方法:
- 提供大范围的概览。
- 快速显示该区域内的细微差别。
结合使用Maps JavaScript API和ImateMapType,显示覆盖 Google 地图的整个视口所需的各个图块。当用户通过平移、缩放或更改位置与地图互动时,热图图块会刷新。
请注意,允许的缩放级别值上限为 16。
进行比邻商家搜索时,Air Quality API 热图图块图层可能会消失。
您可以在有限的一组空气质量指数中,选择热图地图类型:
请务必指明色阶,以便用户了解该值及其颜色排名:
- 渐变刻度 UAQI (0-100):很差 / 极佳
调色板 CSS 代码段:
.gradient-scale { background: linear-gradient(to right, rgb(99, 20, 161) 0%, /* purple */ rgb(149, 0, 25) 20%, /* red */ rgb(248, 47, 21) 40%, /* orange */ rgb(255, 248, 35) 60%, /* yellow */ rgb(34,163,120) 80%, /* steelblue */ rgb(255,255,255) 100% /* white */ ); }
- 以纯色表示 UAQI (0-100) 评分标准中的要点:很差 / 极佳
相关查询数量和费用
- Maps JavaScript API:体验加载时包含 1 个地图。
- Air Quality API:
- 在每个地点执行 1 次查询(全部在加载地图或仅在用户选择时)。
- 热图图块层:每个图块图像为 256*256 像素,要覆盖移动设备或网页上呈现的标准地图,您需要 12-14 个图块。每个拉取图块会计为 1 个 SKU 单元。
- Nearby Search(新)API:每显示 20 个地点执行 1 次查询。根据查询响应中包含的地点数据进行的不同结算方式。
总结
我们发现,Air Quality API 可作为用户决定造访地点的重要数据点。因此,应尽可能在用户的搜索体验中显示空气质量数据,并注意同时显示的信息量和显示方式。
后续操作
建议的深入阅读:
贡献者
本文由 Google 维护。该博文最初由以下贡献者编写。
首席作者:
Thomas Anglaret | 解决方案工程师