Виджет измерителя качества воздуха (экспериментальный)

Сообщить о проблеме Запросить функцию

Виджет «Измеритель качества воздуха» предоставляет настраиваемый элемент HTML для отображения качества воздуха в определенном месте. Вы можете использовать его для переноса текущей информации о качестве воздуха из API качества воздуха в ваше приложение или на веб-страницу с минимальным количеством кода.

Виджет измерителя качества воздуха использует метод CurrentConditions.Lookup , который возвращает локальный показатель качества воздуха, если он доступен для выбранного местоположения. Виджет измерителя качества воздуха поддерживает локальный AQI Агентства по охране окружающей среды США, а в будущем планируется поддержка дополнительных местных индексов. Если местный показатель качества воздуха еще не поддерживается измерителем качества воздуха, он отобразит универсальный показатель качества воздуха. См. страны, поддерживаемые индексом AQ и API качества воздуха, а также доступные AQI для получения дополнительной информации и последних сведений о покрытии базового метода CurrentConditions.Lookup .

В следующем примере показан виджет измерителя качества воздуха с текущими условиями для Маунтин-Вью, Калифорния.

Как использовать виджет измерителя качества воздуха

Прежде чем использовать виджет «Измеритель качества воздуха», включите 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 CSS HTML 
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();

    
/**
 * @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;
}
    
<!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>