تطبيق جودة الهواء المصغّر (ميزة تجريبية)

الإبلاغ عن مشكلة طلب ميزة

يوفّر تطبيق "مقياس جودة الهواء" المصغّر عنصر HTML قابل للتخصيص لعرض جودة الهواء في موقع جغرافي معيّن. يمكنك استخدامها لعرض معلومات جودة الهواء الحالية من Air Quality API في تطبيقك أو صفحة الويب باستخدام مقتطف رمزبرمجي محدود.

يستخدم تطبيق "مقياس جودة الهواء" المصغّر طريقة CurrentConditions.Lookup التي ستعرِض مؤشر جودة الهواء المحلي إذا كان متاحًا للموقع الجغرافي المحدّد. تتيح أداة "مقياس جودة الهواء" مؤشر جودة الهواء المحلي الذي تستخدمه وكالة حماية البيئة الأمريكية (EPA)، مع إتاحة مؤشرات محلية إضافية في المستقبل. إذا لم يكن مؤشر جودة الهواء المحلي متاحًا بعد في "مقياس جودة الهواء"، سيتم عرض مؤشر جودة الهواء العالمي. اطّلِع على مؤشر جودة الهواء و البلدان التي تتوفّر فيها واجهة برمجة التطبيقات Air Quality API ومؤشرات جودة الهواء المتاحة للحصول على مزيد من المعلومات وأحدث تفاصيل التغطية لطريقة CurrentConditions.Lookup الأساسية.

يعرض المثال التالي تطبيق "مقياس جودة الهواء" المصغّر مع الظروف الحالية في مدينة Mountain View بولاية كاليفورنيا.

كيفية استخدام تطبيق جودة الهواء المصغّر

قبل استخدام تطبيق جودة الهواء المصغّر، عليك تفعيل واجهة برمجة التطبيقات 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>

يعرض المثال التالي تطبيق "مقياس جودة الهواء" المضمّن في خريطة. انقر على الخرائط لعرض جودة الهواء في موقع جغرافي معيّن.

الاطّلاع على مثال الرمز البرمجي الكامل

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>