Tiện ích máy đo chất lượng không khí (Thử nghiệm)

Báo cáo vấn đề Yêu cầu tính năng

Tiện ích Đo chất lượng không khí cung cấp một phần tử HTML có thể tuỳ chỉnh để hiển thị chất lượng không khí tại một vị trí nhất định. Bạn có thể sử dụng API này để đưa thông tin hiện tại về chất lượng không khí từ Air Quality API (API chất lượng không khí) vào ứng dụng hoặc trang web của mình bằng mã tối thiểu.

Tiện ích Đo chất lượng không khí sử dụng phương thức CurrentConditions.Lookup. Phương thức này sẽ trả về AQI tại địa phương nếu có cho vị trí đã chọn. Tiện ích Đo lường chất lượng không khí hỗ trợ chỉ số AQI tại địa phương của EPA Hoa Kỳ, đồng thời dự kiến sẽ hỗ trợ thêm các chỉ số tại địa phương trong tương lai. Nếu Máy đo chất lượng không khí chưa hỗ trợ AQI tại địa phương, thì máy sẽ hiển thị AQI chung. Hãy xem Chỉ số chất lượng không khí và Các quốc gia được hỗ trợ API chất lượng không khí và các chỉ số AQI hiện có để biết thêm thông tin và thông tin chi tiết mới nhất về phạm vi áp dụng của phương thức CurrentConditions.Lookup cơ bản.

Ví dụ sau đây cho thấy Tiện ích đo chất lượng không khí với các điều kiện hiện tại tại Mountain View, California.

Cách sử dụng tiện ích Máy đo chất lượng không khí

Trước khi sử dụng tiện ích Máy đo chất lượng không khí, hãy bật API Chất lượng không khí.

Thêm Tiện ích đo chất lượng không khí vào trang HTML bằng cách thêm phần tử gmp-air-quality-meter. Phần tử này cũng có thể được dùng để đặt thuộc tính location. Thuộc tính này sẽ đặt toạ độ vĩ độ và kinh độ cho vị trí đã chọn:

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

Bạn cũng có thể thiết lập tiện ích Máy đo chất lượng không khí trong 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>

Ví dụ sau đây cho thấy Tiện ích đo chất lượng không khí được nhúng trong bản đồ. Nhấp vào bản đồ để xem chất lượng không khí tại một vị trí.

Xem ví dụ về mã hoàn chỉnh

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>