空氣品質監測計小工具 (實驗功能)

回報問題 要求新增功能

空氣品質計量小工具提供可自訂的 HTML 元素，用於顯示特定位置的空氣品質。您可以使用這個 API，透過最少的程式碼，將目前的空氣品質資訊從 Air Quality API 帶入應用程式或網頁。

空氣品質計量小工具會使用 CurrentConditions.Lookup 方法，如果所選位置有空氣品質指數，就會傳回本機空氣品質指數。空氣品質量表小工具支援美國環保署的當地空氣品質指數，日後也將支援更多當地指數。如果空氣品質量測器尚未支援當地空氣品質指數，則會顯示通用空氣品質指數。如要進一步瞭解基礎 CurrentConditions.Lookup 方法的最新涵蓋範圍詳細資料，請參閱 AQ Index 和 Air Quality API 支援的國家/地區和可用的空氣品質指標。

以下範例顯示空氣品質計量小工具，當中顯示加州山景目前的空氣品質狀況。

如何使用空氣品質監測計小工具

使用空氣品質感應器小工具前，請先啟用空氣品質 API。

如要將空氣品質計量器小工具新增至 HTML 頁面，請新增 gmp-air-quality-meter 元素，這個元素也可用來設定 location 屬性，該屬性會設定所選位置的緯度和經度座標：

<gmp-air-quality-meter location="47.656905,-122.407355"></gmp-air-quality-meter>

您也可以在 JavaScript 中設定空氣品質計量小工具：

<script>
const {AirQualityMeterElement} = await google.maps.importLibrary('airQuality');
const meterElement = new AirQualityMeterElement({
  location: {lat: 47.656905, lng: -122.407355}
});
document.body.append(meterElement);
</script>

以下範例顯示嵌入地圖中的空氣品質計量小工具。按一下地圖即可查看某個地點的空氣品質。

查看完整程式碼範例

JavaScriptCSSHTML
let map, meter, marker;

// Initialize the map.
async function initMap() {
  // Set to the center of the continental US.
  const center = {
    lat: 40.6048080,
    lng: -99.386252,
  };

  // Import needed libraries.
  await Promise.all([
    google.maps.importLibrary('airQuality'),
    google.maps.importLibrary('maps'),
    google.maps.importLibrary('marker'),
  ]);

  map = document.getElementById('map_element');
  map.innerMap.setOptions({
    mapTypeControl: false,
    fullscreenControl: false,
    clickableIcons: false,
  });

  meter = document.getElementById('meter_element');
  marker = document.getElementById('marker_element');

  map.center = center;
  marker.position = meter.location = {lat: 37.424100, lng: -122.092692};

  // Add an event listener to handle map clicks.
  map.innerMap.addListener('click', async (event) => {
    marker.position = meter.location = event.latLng;
  });
}

initMap();

    
/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

body {
  margin: 0;
}

gmp-map {
  height: 400px;
}

gmp-air-quality-meter {
  margin: 8px;
  padding: 8px;
  background: white;
  border: 1px solid grey;
  border-radius: 1px;
  font-size: 16px;
}
    
<!DOCTYPE html>
<html>
<head>
  <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "YOUR_API_KEY",
          v: "alpha"
        });
  </script>
</head>
<body>
    <gmp-map map-id="DEMO_MAP_ID" zoom="4" id="map_element">
      <gmp-air-quality-meter slot="control-block-start-inline-start" id="meter_element"></gmp-air-quality-meter>
      <gmp-advanced-marker id="marker_element"></gmp-advanced-marker>
    </gmp-map>
</body>
</html>