空气质量检测仪微件（实验性）

报告问题 请求添加功能

空气质量计微件提供了一个可自定义的 HTML 元素，用于显示给定位置的空气质量。借助此 API，您只需编写少量代码，即可将 Air Quality API 中的当前空气质量信息引入到您的应用或网页中。

空气质量计微件使用 CurrentConditions.Lookup 方法，该方法会在所选位置有本地 AQI 时返回该 AQI。空气质量计 widget 支持美国国家环境保护局 (EPA) 的本地 AQI，未来还计划支持其他本地指数。如果空气质量监测器尚不支持当地 AQI，则会显示通用 AQI。如需了解详情以及底层 CurrentConditions.Lookup 方法的最新覆盖范围详细信息，请参阅 AQ 指数和 Air Quality API 支持的国家/地区和可用的 AQI。

以下示例展示了空气质量计微件，其中显示了加利福尼亚州山景城的当前空气质量状况。

如何使用空气质量检测仪微件

在使用空气质量计微件之前，请启用 Air Quality API。

通过添加 gmp-air-quality-meter 元素将空气质量监测器微件添加到 HTML 页面中，该元素还可用于设置 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>

以下示例展示了嵌入在地图中的空气质量计 widget。点击地图即可显示某个地点的空气质量。

查看完整代码示例

JavaScript

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();

CSS

/**
 * @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;
}

HTML

<!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>