使用 Air Quality API 監測地點的空氣品質

本文將探討如何使用 Air Quality API 建構豐富的搜尋地點體驗。 我們將說明空氣品質如何從漏斗開端到結尾，都成為對使用者有價值的信號，以及如何將空氣品質 API 資料嵌入現有體驗。

應用實例和附加價值

空氣品質 API 信號可適用於各種搜尋體驗，例如使用者搜尋要造訪的地點時。Air Quality API 提供以下功能：

  • 即時和歷來資料：以每小時為單位，提供 30 天內準確的最新資料，呈現目前狀態和過去的資料。(每小時的室外空氣品質快照)
  • 全球和當地資料 - 涵蓋 100 多個國家/地區的整個區域，但高度在地化 (最多 500 公尺)。空氣品質 API 資料提供重要信號，供使用者比較並決定最合適的地點。

即使是鄰近地點，空氣品質也可能大相逕庭

範例逐步操作說明

在體驗初期顯示空氣品質資料

顯示 Air Quality API 資料的主要方式有兩種：

在位置圖釘上顯示 Air Quality API 資料

  • 選擇要顯示的指數：通用空氣品質指數或當地空氣品質指數 (最多可選擇 70 種不同的空氣品質指數 (AQI))。空氣品質指數 (AQI) 是指特定國家/地區 (例如美國環保署) 根據不同計算方法、資料來源和指定用途，將不同空氣品質等級分類的標準。
  • 直接在地點搜尋體驗中，開始以視覺化方式呈現主要的 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。
在超地方搜尋中，空氣品質 API 熱度圖圖塊圖層可能會消失。

您可以在有限的空氣品質指數集中選取「熱度圖地圖類型」：

  • UAQI_RED_GREEN - Universal Air Quality Index red-green palette.
  • UAQI_INDIGO_PERSIAN - Universal Air Quality Index indigo-persian palette.
  • PM25_INDIGO_PERSIAN - PM2.5 指數靛藍色調色盤。
  • GBR_DEFRA - Daily Air Quality Index (UK) 調色盤。
  • 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 單位。
    • Nearby Search (新版) API：每顯示 20 個地點，就會產生 1 次查詢。根據查詢回應中包含的地點資料，計費方式有所不同。

    結論

    我們證明瞭空氣品質 API 可做為重要的資料點，供使用者決定要造訪的地點。因此，空氣品質資料應盡可能在搜尋體驗中顯示，同時注意一次顯示的資訊量和顯示方式。

    後續動作

    建議延伸閱讀：

    貢獻者

    本文由 Google 維護。以下是這篇文章的原始撰稿人。
    主要作者：

    Thomas Anglaret | 解決方案工程師