ابزارک سنجش کیفیت هوا (تجربی)

گزارش یک مشکل درخواست یک ویژگی

ابزارک سنجش کیفیت هوا یک عنصر HTML قابل تنظیم را برای نمایش کیفیت هوا برای یک مکان مشخص ارائه می دهد. می توانید از آن برای آوردن اطلاعات فعلی کیفیت هوا از Air Quality API به برنامه یا صفحه وب خود با حداقل کد استفاده کنید.

ابزارک سنجش کیفیت هوا از روش CurrentConditions.Lookup استفاده می‌کند، که اگر برای مکان انتخابی موجود باشد، AQI محلی را برمی‌گرداند. ویجت سنجش کیفیت هوا از AQI محلی EPA ایالات متحده با پشتیبانی برنامه ریزی شده برای شاخص های محلی اضافی در آینده پشتیبانی می کند. اگر AQI محلی هنوز توسط سنج کیفیت هوا پشتیبانی نمی شود، AQI جهانی را نمایش می دهد. برای اطلاعات بیشتر و آخرین جزئیات پوشش روش زیربنایی CurrentConditions.Lookup ، به کشورهای پشتیبانی‌شده از AQ Index و Air Quality API و AQI‌های موجود مراجعه کنید.

مثال زیر ابزارک سنجش کیفیت هوا را با شرایط فعلی Mountain View، CA نشان می دهد.

نحوه استفاده از ابزارک سنجش کیفیت هوا

قبل از استفاده از ابزارک سنجش کیفیت هوا، API کیفیت هوا را فعال کنید .

ویجت سنجش کیفیت هوا را با افزودن عنصر gmp-air-quality-meter به یک صفحه HTML اضافه کنید، که همچنین ممکن است برای تنظیم ویژگی location استفاده شود، که مختصات طول و عرض جغرافیایی را برای مکان انتخابی تنظیم می کند:

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

همچنین می توانید ابزارک سنجش کیفیت هوا را در جاوا اسکریپت تنظیم کنید:

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

مثال زیر ابزارک سنجش کیفیت هوا را نشان می دهد که در یک نقشه جاسازی شده است. برای نمایش کیفیت هوای یک مکان، روی نقشه کلیک کنید.

نمونه کد کامل را ببینید

جاوا اسکریپت 

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>