在本文档中,您将了解如何使用 Air Quality API 打造丰富的地点搜索体验。 我们将从一开始介绍空气质量如何成为用户的价值信号 以及如何将 Air Quality API 数据嵌入到现有体验中。
应用场景和附加价值
Air Quality API 信号可融入各种搜索体验,例如 当用户寻找要访问的营业地点时。Air Quality API 提供:
- 实时 * 和历史数据 - 准确的最新数据,既能代表当前状态,又能以小时为单位,显示 30 天内的回溯数据。(* 每小时室外空气质量概况)
- 全球和本地数据 - 涵盖 100 多个国家/地区的整个区域,但高度本地化(最高可达 500 米)。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 |解决方案工程师