Tiện ích Đo chất lượng không khí cung cấp một phần tử HTML có thể tuỳ chỉnh để hiển thị chất lượng không khí tại một vị trí nhất định. Bạn có thể sử dụng API này để đưa thông tin hiện tại về chất lượng không khí từ Air Quality API (API chất lượng không khí) vào ứng dụng hoặc trang web của mình bằng mã tối thiểu.
Tiện ích Đo chất lượng không khí sử dụng phương thức CurrentConditions.Lookup. Phương thức này sẽ trả về AQI tại địa phương nếu có cho vị trí đã chọn. Tiện ích Đo lường chất lượng không khí hỗ trợ chỉ số AQI tại địa phương của EPA Hoa Kỳ, đồng thời dự kiến sẽ hỗ trợ thêm các chỉ số tại địa phương trong tương lai. Nếu Máy đo chất lượng không khí chưa hỗ trợ AQI tại địa phương, thì máy sẽ hiển thị AQI chung. Hãy xem Chỉ số chất lượng không khí và Các quốc gia được hỗ trợ API chất lượng không khí và các chỉ số AQI hiện có để biết thêm thông tin và thông tin chi tiết mới nhất về phạm vi áp dụng của phương thức CurrentConditions.Lookup cơ bản.
Ví dụ sau đây cho thấy Tiện ích đo chất lượng không khí với các điều kiện hiện tại tại Mountain View, California.
Thêm Tiện ích đo chất lượng không khí vào trang HTML bằng cách thêm phần tử gmp-air-quality-meter. Phần tử này cũng có thể được dùng để đặt thuộc tính location. Thuộc tính này sẽ đặt toạ độ vĩ độ và kinh độ cho vị trí đã chọn:
Ví dụ sau đây cho thấy Tiện ích đo chất lượng không khí được nhúng trong bản đồ. Nhấp vào bản đồ để xem chất lượng không khí tại một vị trí.
Xem ví dụ về mã hoàn chỉnh
JavaScript
letmap,meter,marker;// Initialize the map.asyncfunctioninitMap(){// Set to the center of the continental US.constcenter={lat:40.6048080,lng:-99.386252,};// Import needed libraries.awaitPromise.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:1pxsolidgrey;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>
[null,null,["Cập nhật lần gần đây nhất: 2025-02-05 UTC."],[],[],null,["| This product or feature is Experimental (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by the [Google Maps Platform Service Specific Terms](https://cloud.google.com/maps-platform/terms/maps-service-terms). For more information, see the [launch stage descriptions](/maps/launch-stages). \n| **Please file bugs and feature requests to help guide our future releases.**\n\n[Report an issue](https://issuetracker.google.com/issues/new?component=188853&template=788207)\n[Request a feature](https://issuetracker.google.com/issues/new?component=188853&template=787814)\n\n*** ** * ** ***\n\nThe Air Quality Meter Widget provides a customizable HTML element to display air quality for a\ngiven location. You can use it to bring current air quality information from the\n[Air Quality API](/maps/documentation/air-quality) to your app or web page with minimal\ncode.\n\nThe Air Quality Meter Widget uses the [`CurrentConditions.Lookup`](/maps/documentation/air-quality/reference/rest/v1/currentConditions/lookup) method, which will return the\nlocal AQI if it's available for the selected location. The Air Quality Meter Widget supports the US EPA local AQI, with planned support for additional local indexes in the future. If local AQI is not yet supported by the Air Quality Meter, it will display the Universal AQI. See\n[AQ Index](/maps/documentation/air-quality/laqis) and\n[Air Quality API supported countries and available AQIs](/maps/documentation/air-quality/coverage)\nfor more information and the latest coverage details of the underlying `CurrentConditions.Lookup` method.\n\nThe following example shows the Air Quality Meter Widget with current conditions for Mountain View, CA.\n\nHow to use the Air Quality Meter Widget\n\nBefore using the Air Quality Meter Widget, [enable the Air Quality API](/maps/documentation/air-quality/cloud-setup#enabling-apis).\n\nAdd the Air Quality Meter Widget to an HTML page by adding the `gmp-air-quality-meter`\nelement, which may also be used to set the `location`\nattribute, which sets the latitude and longitude coordinates for the chosen location: \n\n```html\n\u003cgmp-air-quality-meter location=\"47.656905,-122.407355\"\u003e\u003c/gmp-air-quality-meter\u003e\n```\n\nYou can also set up the Air Quality Meter Widget in JavaScript: \n\n```html\n\u003cscript\u003e\nconst {AirQualityMeterElement} = await google.maps.importLibrary('airQuality');\nconst meterElement = new AirQualityMeterElement({\n location: {lat: 47.656905, lng: -122.407355}\n});\ndocument.body.append(meterElement);\n\u003c/script\u003e\n```\n\nThe following example shows the Air Quality Meter Widget embedded in a map. Click the\nmap to show the air quality for a location.\n\nSee the complete code example \n\nJavaScript \n\n```javascript\nlet map, meter, marker;\n\n// Initialize the map.\nasync function initMap() {\n // Set to the center of the continental US.\n const center = {\n lat: 40.6048080,\n lng: -99.386252,\n };\n\n // Import needed libraries.\n await Promise.all([\n google.maps.importLibrary('airQuality'),\n google.maps.importLibrary('maps'),\n google.maps.importLibrary('marker'),\n ]);\n\n map = document.getElementById('map_element');\n map.innerMap.setOptions({\n mapTypeControl: false,\n fullscreenControl: false,\n clickableIcons: false,\n });\n\n meter = document.getElementById('meter_element');\n marker = document.getElementById('marker_element');\n\n map.center = center;\n marker.position = meter.location = {lat: 37.424100, lng: -122.092692};\n\n // Add an event listener to handle map clicks.\n map.innerMap.addListener('click', async (event) =\u003e {\n marker.position = meter.location = event.latLng;\n });\n}\n\ninitMap();\n\n \n```\n\nCSS \n\n```css\n/**\n * @license\n * Copyright 2019 Google LLC. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nbody {\n margin: 0;\n}\n\ngmp-map {\n height: 400px;\n}\n\ngmp-air-quality-meter {\n margin: 8px;\n padding: 8px;\n background: white;\n border: 1px solid grey;\n border-radius: 1px;\n font-size: 16px;\n}\n \n```\n\nHTML \n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n \u003cscript\u003e\n (g=\u003e{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=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+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=()=\u003eh=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)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})({\n key: \"YOUR_API_KEY\",\n v: \"alpha\"\n });\n \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n \u003cgmp-map map-id=\"DEMO_MAP_ID\" zoom=\"4\" id=\"map_element\"\u003e\n \u003cgmp-air-quality-meter slot=\"control-block-start-inline-start\" id=\"meter_element\"\u003e\u003c/gmp-air-quality-meter\u003e\n \u003cgmp-advanced-marker id=\"marker_element\"\u003e\u003c/gmp-advanced-marker\u003e\n \u003c/gmp-map\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n \n```"]]
