使用 Air Quality API 监测地点的空气质量

本文档将介绍如何使用 Air Quality API 构建丰富的地点搜索体验。 我们将展示空气质量如何从漏斗的开始到结束都可作为有价值的用户信号，以及如何将空气质量 API 数据嵌入到现有体验中。

使用场景和附加价值

空气质量 API 信号可用于各种搜索体验，例如当用户寻找要前往的地点时。Air Quality API 提供以下功能：

  • 实时和历史数据 - 新鲜、准确的数据，可反映当前状态以及 30 天内以小时为单位的时间段内的数据。（* 室外空气质量的每小时快照）
  • 全球和本地数据 - 覆盖 100 多个国家/地区的整个区域，但高度本地化（精确到 500 米），空气质量 API 数据可为用户提供关键信号，以便他们比较并决定最合适的地点。

即使是邻近位置，空气质量也可能大相径庭

示例演示

在体验初期显示空气质量数据

您可以通过两种主要方式显示 Air Quality API 数据：

在位置标记上显示 Air Quality API 数据

  • 选择您所在位置的指数：通用 AQI 或本地 AQI（最多可选择 70 种不同的空气质量指数 (AQI)）。空气质量指数 (AQI) 是某个国家/地区（例如美国环保署 [EPA]）根据不同的计算方法、数据源和指定用途对不同空气质量水平进行分类的指标。
  • 直接从地点搜索体验中开始直观呈现主要空气质量 API 值和颜色代码。

默认显示可能仅包含颜色代码。


在选择图钉时显示更多空气质量 API 信息：

  • 通用 AQI / 本地 AQI 的含义。
  • 污染物含量，用于衡量空气中的颗粒物和气体：主要污染物、浓度、来源和影响。
  • 健康建议，即针对当前空气质量状况的建议措施。
  • 您可以根据自己的需求调整默认显示的信息量。请注意，与不同位置的数据点进行比较通常很有用。

“空气质量”部分显示示例

空气质量响应

{
    "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": …
    }
}
  • 或者，您也可以仅在与某个位置互动时查询空气质量数据。

  • 您可以使用空气质量指数 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。
在进行超本地化搜索时，空气质量 API 热力图图块层可能会消失。

您可以在有限的空气质量指数范围内选择热图地图类型：

  • UAQI_RED_GREEN - 通用空气质量指数红绿调色板。
  • UAQI_INDIGO_PERSIAN - 通用空气质量指数靛青-波斯调色板。
  • PM25_INDIGO_PERSIAN - PM2.5 指数靛青-波斯调色板。
  • GBR_DEFRA - 英国每日空气质量指数调色板。
  • DEU_UBA - 德国本地空气质量指数调色板。
  • CAN_EC - 加拿大空气质量健康指数调色板。
  • FRA_ATMO - 法国空气质量指数调色板。
  • US_AQI - 美国空气质量指数调色板。

    • 请务必指明颜色比例，以便用户了解相应值及其颜色排名：

    • 梯度比例 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 单位。
    • 附近搜索（新）API：每显示 20 个地点，进行 1 次查询。根据查询响应中包含的地点数据，采用不同的结算方式。

    总结

    我们展示了空气质量 API 如何成为用户决定前往何处的重要数据点。因此，空气质量数据应尽早显示在搜索体验中，同时注意一次显示的信息量以及显示方式。

    后续操作

    建议的延伸阅读材料：

    贡献者

    Google 负责维护本文。以下贡献者最初撰写了此内容。
    主要作者：

    Thomas Anglaret | 解决方案工程师