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

在本文件中，您將瞭解如何使用 Air Quality API 打造內容豐富的地點搜尋體驗。 我們將示範如何從一開始，就空氣品質呈現使用者價值的信號， 以及如何將 Air Quality API 資料嵌入現有體驗中。

用途和附加價值

Air Quality API 信號適用於各種搜尋體驗，例如在使用者尋找要造訪的地點時。Air Quality API 提供：

  • 即時 * 和歷來資料 - 最新準確的資料，可呈現目前狀態，以及 30 天內 (以小時為單位) 的過去時間資料。(* 每小時戶外空氣品質數據匯報)
  • 全球和當地資料 - 涵蓋超過 100 個國家/地區的整個區域，但高度本地化 (最多可達 5 億個) Air Quality API 資料提供重要的信號，方便使用者在最適當的地點進行比較和決策。

即使鄰近地區，空氣品質也可能有極大差異

範例逐步操作說明

協助在第一時間顯示空氣品質資料

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

在地點圖釘上顯示 Air Quality API 資料

  • 選擇你的位置索引：通用空氣品質指數或地方空氣品質指數 (最多 70 個不同的空氣品質指數 (AQI))。空氣品質指數 (AQI) 是指特定國家/地區 (例如美國 EPA) 的空氣品質指數，會根據不同計算方式、資料來源和指定用途，將不同空氣品質等級進行分類。
  • 直接從 Place Search 體驗中，開始視覺化呈現主要的 Air Quality API 值和顏色代碼。

預設螢幕只能包含顏色代碼。


在圖釘選項上顯示更多 Air Quality API 資訊：

  • 通用空氣品質指數 / 本地空氣品質指數 (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": …
    }
}
  • 您也可以只查詢與地點互動的空氣品質資料。

  • 你可以使用 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_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 單位。
    • Nearby Search (New) API：顯示每 20 個地點 1 個查詢。根據查詢回應中的地點資料提供不同的計費方式。

    結論

    我們證明，Air Quality API 是可供使用者決定造訪地點的重要資料點。因此，應以最早期顯示的搜尋體驗顯示空氣品質資料，同時謹慎地一次顯示的資訊量及資料的顯示方式。

    下一步

    延伸閱讀：

    貢獻者

    Google 維護這篇文章。以下著作人最初編寫過這個草稿。
    主體作者：

    Thomas Anglaret | 解決方案工程師