একটি সমস্যা রিপোর্ট একটি বৈশিষ্ট্য অনুরোধ করুন
এয়ার কোয়ালিটি মিটার উইজেট একটি প্রদত্ত অবস্থানের জন্য বায়ুর গুণমান প্রদর্শন করতে একটি কাস্টমাইজযোগ্য HTML উপাদান সরবরাহ করে। আপনি এয়ার কোয়ালিটি API থেকে আপনার অ্যাপ বা ওয়েব পৃষ্ঠায় ন্যূনতম কোড সহ বর্তমান বায়ু মানের তথ্য আনতে এটি ব্যবহার করতে পারেন।
এয়ার কোয়ালিটি মিটার উইজেট CurrentConditions.Lookup পদ্ধতি ব্যবহার করে, যা নির্বাচিত অবস্থানের জন্য উপলব্ধ থাকলে স্থানীয় AQI ফেরত দেবে। এয়ার কোয়ালিটি মিটার উইজেট ভবিষ্যতে অতিরিক্ত স্থানীয় সূচকের জন্য পরিকল্পিত সমর্থন সহ US EPA স্থানীয় AQI সমর্থন করে। যদি স্থানীয় AQI এখনও এয়ার কোয়ালিটি মিটার দ্বারা সমর্থিত না হয়, তাহলে এটি সর্বজনীন AQI প্রদর্শন করবে। আরও তথ্যের জন্য AQ Index এবং Air Quality API সমর্থিত দেশ এবং উপলব্ধ AQI দেখুন এবং অন্তর্নিহিত CurrentConditions.Lookup পদ্ধতির সর্বশেষ কভারেজ বিশদ বিবরণের জন্য।
নিম্নোক্ত উদাহরণ মাউন্টেন ভিউ, CA-এর বর্তমান অবস্থার সাথে এয়ার কোয়ালিটি মিটার উইজেট দেখায়।
এয়ার কোয়ালিটি মিটার উইজেট কিভাবে ব্যবহার করবেন
এয়ার কোয়ালিটি মিটার উইজেট ব্যবহার করার আগে, এয়ার কোয়ালিটি API সক্ষম করুন ।
gmp-air-quality-meter উপাদান যোগ করে একটি এইচটিএমএল পৃষ্ঠায় এয়ার কোয়ালিটি মিটার উইজেট যোগ করুন, যা location অ্যাট্রিবিউট সেট করতেও ব্যবহার করা যেতে পারে, যা নির্বাচিত অবস্থানের জন্য অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক সেট করে:
<gmp-air-quality-meter location="47.656905,-122.407355"></gmp-air-quality-meter>
আপনি জাভাস্ক্রিপ্টে এয়ার কোয়ালিটি মিটার উইজেট সেট আপ করতে পারেন:
<script>
const {AirQualityMeterElement} = await google.maps.importLibrary('airQuality');
const meterElement = new AirQualityMeterElement({
location: {lat: 47.656905, lng: -122.407355}
});
document.body.append(meterElement);
</script>নিম্নলিখিত উদাহরণটি একটি মানচিত্রে এমবেড করা এয়ার কোয়ালিটি মিটার উইজেট দেখায়। একটি অবস্থানের জন্য বায়ু গুণমান প্রদর্শন করতে মানচিত্রে ক্লিক করুন.
সম্পূর্ণ কোড উদাহরণ দেখুন
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>