ווידג'ט של מד איכות אוויר (ניסיוני)

דיווח על בעיה בקשה להוספת תכונה

הווידג'ט של מד איכות האוויר מספק רכיב HTML שניתן להתאמה אישית כדי להציג את איכות האוויר במיקום נתון. אפשר להשתמש בו כדי להציג באפליקציה או בדף האינטרנט מידע עדכני על איכות האוויר מ-Air Quality API, באמצעות כמות מינימלית של קוד.

הווידג'ט של מד איכות האוויר משתמש בשיטה CurrentConditions.Lookup, שמחזירה את מדד איכות האוויר המקומי אם הוא זמין במיקום שנבחר. הווידג'ט של מד איכות האוויר תומך במדד AQI המקומי של הסוכנות להגנת הסביבה בארה"ב (EPA), ובעתיד תתווסף תמיכה במדדים מקומיים נוספים. אם מדד ה-AQI המקומי עדיין לא נתמך במדד איכות האוויר, יוצג מדד ה-AQI האוניברסלי. למידע נוסף ופרטי הכיסוי העדכניים ביותר של השיטה הבסיסית CurrentConditions.Lookup, אפשר לעיין במאמרים מדד איכות האוויר והמדינות הנתמכות ב-Air Quality API ומדדי ה-AQI הזמינים.

בדוגמה הבאה מוצג הווידג'ט של מד איכות האוויר עם התנאים הנוכחיים ב-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>