วิดเจ็ตเครื่องวัดคุณภาพอากาศ (ทดลอง)

รายงานปัญหา ขอฟีเจอร์

วิดเจ็ตเครื่องวัดคุณภาพอากาศมีองค์ประกอบ HTML ที่ปรับแต่งได้เพื่อแสดงคุณภาพอากาศของสถานที่หนึ่งๆ คุณสามารถใช้เพื่อนําข้อมูลคุณภาพอากาศปัจจุบันจาก Air Quality API ไปยังแอปหรือหน้าเว็บได้โดยใช้โค้ดเพียงเล็กน้อย

วิดเจ็ตเครื่องวัดคุณภาพอากาศใช้เมธอด CurrentConditions.Lookup ซึ่งจะแสดง AQI ในพื้นที่หากมีข้อมูลสำหรับสถานที่ที่เลือก วิดเจ็ตเครื่องวัดคุณภาพอากาศรองรับ AQI ในพื้นที่ของ EPA สหรัฐอเมริกา โดยมีแผนที่จะรองรับดัชนีในพื้นที่เพิ่มเติมในอนาคต หากเครื่องวัดคุณภาพอากาศยังไม่รองรับ AQI ในพื้นที่ เครื่องจะแสดง AQI สากล ดูข้อมูลเพิ่มเติมและรายละเอียดการครอบคลุมล่าสุดของเมธอด CurrentConditions.Lookup พื้นฐานได้ที่ดัชนีคุณภาพอากาศและประเทศที่รองรับ Air Quality API และ AQI ที่พร้อมใช้งาน

ตัวอย่างต่อไปนี้แสดงวิดเจ็ตเครื่องวัดคุณภาพอากาศที่มีสภาพอากาศปัจจุบันของภูเก็ต

วิธีใช้วิดเจ็ตเครื่องวัดคุณภาพอากาศ

ก่อนใช้วิดเจ็ตเครื่องวัดคุณภาพอากาศ ให้เปิดใช้ Air Quality 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>