Widget für Luftqualitätsmesser (experimentell)

Problem melden Funktion anfordern

Das Widget „Luftqualitätsmesser“ bietet ein anpassbares HTML-Element, mit dem die Luftqualität an einem bestimmten Standort angezeigt werden kann. Mit diesem Tool können Sie aktuelle Informationen zur Luftqualität aus der Air Quality API mit minimalem Code in Ihre App oder auf Ihre Webseite einbinden.

Das Widget für den Luftqualitätsmesser verwendet die Methode CurrentConditions.Lookup. Damit wird der lokale LQI zurückgegeben, sofern er für den ausgewählten Standort verfügbar ist. Das Luftqualitätsmessgerät-Widget unterstützt den lokalen LQI der US-amerikanischen Umweltschutzbehörde EPA. Künftig sollen weitere lokale Indizes unterstützt werden. Wenn der lokale LQI vom Luftqualitätsmesser noch nicht unterstützt wird, wird der universelle LQI angezeigt. Weitere Informationen und aktuelle Details zur Abdeckung der zugrunde liegenden CurrentConditions.Lookup-Methode finden Sie unter LQI und Von der Luftqualitäts-API unterstützte Länder und verfügbare LQIs.

Das folgende Beispiel zeigt das Widget „Luftqualitätsmesser“ mit den aktuellen Bedingungen für Mountain View, Kalifornien.

Widget für Luftqualität verwenden

Aktivieren Sie vor der Verwendung des Luftqualitätsmessgerät-Widgets die Air Quality API.

Fügen Sie das Widget „Luftqualitätsmesser“ einer HTML-Seite hinzu, indem Sie das Element gmp-air-quality-meter einfügen. Mit diesem Element können Sie auch das Attribut location festlegen, das die Koordinaten für die geografische Breite und Länge des ausgewählten Standorts festlegt:

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

Sie können das Widget für den Luftqualitätsmesser auch in JavaScript einrichten:

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

Das folgende Beispiel zeigt das Widget „Luftqualitätsmesser“, das in eine Karte eingebettet ist. Klicken Sie auf die Karte, um die Luftqualität für einen Ort aufzurufen.

Vollständiges Codebeispiel ansehen

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>