Widżet miernika jakości powietrza (eksperymentalny)

Zgłoś problem Poproś o dodanie funkcji

Widżet Air Quality Meter udostępnia dostosowywalny element HTML, który wyświetla jakość powietrza w danej lokalizacji. Za jego pomocą możesz w sposób łatwy i szybki przesyłać do swojej aplikacji lub strony internetowej aktualne informacje o jakości powietrza z interfejsu Air Quality API.

Widżet Air Quality Meter używa metody CurrentConditions.Lookup, która zwróci lokalny AQI, jeśli jest dostępny dla wybranej lokalizacji. Widget Air Quality Meter obsługuje lokalny wskaźnik AQI EPA w Stanach Zjednoczonych. W przyszłości planujemy dodać obsługę kolejnych lokalnych indeksów. Jeśli lokalny indeks AQI nie jest jeszcze obsługiwany przez licznik jakości powietrza, wyświetlany jest uniwersalny indeks AQI. Aby dowiedzieć się więcej i poznać najnowsze informacje o zasięgu metody CurrentConditions.Lookup, zapoznaj się z indeksem jakości powietrza i lista krajów obsługiwanych przez interfejs Air Quality API oraz dostępne AQI.

Ten przykład pokazuje widżet Air Quality Meter z aktualnymi warunkami w Mountain View w Kalifornii.

Jak korzystać z widżetu jakości powietrza

Przed użyciem widżetu Air Quality Meter włącz interfejs API Air Quality API.

Dodaj widget Air Quality Meter do strony HTML, dodając element gmp-air-quality-meter, który może też służyć do ustawiania atrybutu location, który z kolei ustawia współrzędne geograficzne wybranej lokalizacji:

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

Widżet Air Quality Meter możesz też skonfigurować w 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>

Ten przykład pokazuje widżet Air Quality Meter umieszczony na mapie. Kliknij mapę, aby wyświetlić jakość powietrza w danej lokalizacji.

Pełny przykład kodu

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>