Hava Kalitesi Ölçer Widget'ı (Deneysel)

Sorun bildirme Özellik iste

Hava Kalitesi Ölçer widget'ı, belirli bir konumun hava kalitesini görüntülemek için özelleştirilebilir bir HTML öğesi sağlar. Hava Kalitesi API'sinden güncel hava kalitesi bilgilerini uygulamanıza veya web sayfanıza minimum kodla getirmek için bu aracı kullanabilirsiniz.

Hava Kalitesi Ölçer widget'ı, seçilen konum için mevcutsa yerel HKİ'yi döndüren CurrentConditions.Lookup yöntemini kullanır. Hava Kalitesi Ölçer widget'ı, ABD EPA yerel HKİ'yi destekler. Gelecekte ek yerel indeksler için destek sunulması planlanmaktadır. Yerel HKİ henüz Hava Kalitesi Ölçer tarafından desteklenmiyorsa Evrensel HKİ gösterilir. Daha fazla bilgi ve temel CurrentConditions.Lookup yönteminin en son kapsam ayrıntıları için HKİ ve Hava Kalitesi API'nin desteklediği ülkeler ve mevcut HKİ'ler başlıklı makaleleri inceleyin.

Aşağıdaki örnekte, Kaliforniya, Mountain View'daki mevcut koşulları gösteren Hava Kalitesi Ölçer widget'ı gösterilmektedir.

Hava Kalitesi Ölçüm Cihazı widget'ını kullanma

Hava Kalitesi Ölçüm Cihazı widget'ını kullanmadan önce Hava Kalitesi API'sini etkinleştirin.

Hava Kalitesi Ölçer widget'ını bir HTML sayfasına eklemek için gmp-air-quality-meter öğesini ekleyin. Bu öğe, seçilen konumun enlem ve boylam koordinatlarını ayarlayan location özelliğini ayarlamak için de kullanılabilir:

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

Hava Kalitesi Ölçer widget'ını JavaScript'te de ayarlayabilirsiniz:

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

Aşağıdaki örnekte, bir haritaya yerleştirilmiş Hava Kalitesi Ölçer widget'ı gösterilmektedir. Bir konumun hava kalitesini görmek için haritayı tıklayın.

Kod örneğinin tamamını görüntüleme

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>