การบูรณาการขั้นพื้นฐานทำได้ง่ายและตรงไปตรงมา ก่อนอื่นคุณต้องเพิ่มโค้ดต่อไปนี้:

  
<script  type="text/javascript"  charset="utf-8">  
	(function  (w,  d,  t,  f)  {  
		w[f]  =  w[f]  ||  function  (c,  k,  n)  {  
			s  =  w[f],  k  =  s['k']  =  (s['k']  ||  (k  ?  ('&k='  +  k)  :  ''));  s['c']  =  
				c  =  (c  instanceof  Array)  ?  c  :  [c];  s['n']  =  n  =  n  ||  0;  L  =  d.createElement(t),  e  =  d.getElementsByTagName(t)[0];  
			L.async  =  1;  L.src  =  '//feed.aqicn.org/feed/'  +  (c[n].city)  +  '/'  +  (c[n].lang  ||  '')  +  '/feed.v1.js?n='  +  n  +  k;  
			e.parentNode.insertBefore(L,  e);  
		};  
	})(window,  document,  'script',  '_aqiFeed');    
</script>

จากนั้น เพียงเพิ่มโค้ดอื่นนี้เพื่อรวมวิดเจ็ต:

  
<span  id="city-aqi-container"></span>  
  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  container:  "city-aqi-container",  city:  "beijing"  });  
</script>

ฟังก์ชัน `_aqiFeed` ใช้เป็นอาร์กิวเมนต์ของบล็อกการกำหนดค่าสำหรับวิดเจ็ต พารามิเตอร์ `container: "city-aqi-container"` หมายถึงรหัสของแท็กที่คุณต้องการแทรกวิดเจ็ต (เช่น `<span id='city-aqi-container'></span>`) และ city พารามิเตอร์คือชื่อเมืองที่คุณต้องการแสดงการอ่านค่าคุณภาพอากาศในปัจจุบัน (เช่น `เมือง: "ลอนดอน")

北京

34

北京空气质量

34

优

更新时间 星期日10:00

PM2.5 AQI		21
PM10 AQI		8
O3 AQI		34

Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

คุณยังสามารถระบุภาษาที่จะใช้โดยการตั้งค่าตัวเลือก lang ตัวอย่างเช่น หากต้องการรวมวิดเจ็ตเป็นภาษาจีน (ดังภาพด้านขวา) ให้ใช้โค้ดต่อไปนี้:

  
_aqiFeed({  
	container:"city-aqi-container",  
	city:"beijing",  
	lang:"cn"  
});  

ภาษาที่รองรับในปัจจุบันคือ:

Beijing AQI is

34

Beijing Air Quality.

34

Good

Updated on Sunday 10:00

PM2.5 AQI		21
PM10 AQI		8
O3 AQI		34

Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

on Sunday 10:00

คุณสามารถปรับแต่งข้อความที่จะแสดงภายในวิดเจ็ตได้โดยการระบุตัวเลือก display ตัวอย่างเช่น หากต้องการแสดงทั้งชื่อ "AQI" แบบข้อความและเวลาอัปเดต (ดังที่แสดงบนวิดเจ็ตทางด้านซ้าย) คุณสามารถใช้โค้ดต่อไปนี้:

  
_aqiFeed({    
	display:"%cityname  AQI  is  %aqi<br><small>on  %date</small>",  
	container:"city-aqi-container-display",    
	city:"beijing"  
});  

display พารามิเตอร์เป็นสตริงแบบ HTML และสามารถมีคีย์เวิร์ดใดๆ ต่อไปนี้:

• `%cityname` สำหรับชื่อเมือง (เช่น Beijing )
• `%aqi` สำหรับค่า AQI ที่ตกแต่งแล้ว (เช่น 58 )
• `%aqiv` สำหรับค่า AQI ที่ไม่ได้ตกแต่ง (ข้อความดิบ) (เช่น 58 )
• `%style` สำหรับการประกาศ CSS ของรายละเอียด AQI ที่ตกแต่งแล้ว (เช่น background-color: #ffde33;color:#000000; )
• `%date` สำหรับเวลาที่ AQI ได้รับการอัปเดต (เช่น Wed 20:00 . )
• `%impact` สำหรับผลกระทบต่อสุขภาพที่เกี่ยวข้อง (เช่น Good Moderate ...)
• `%attribution` สำหรับการระบุแหล่งที่มาของข้อมูล AQI (เช่น Beijing Environmental Protection Monitoring Center )
• `%details` สำหรับรายละเอียด AQI แบบเต็ม (เนื้อหาของป๊อปอัปที่แสดงเมื่อเลื่อนเมาส์ไปเหนือค่า AQI)

นี่คือตัวอย่างบางส่วน:

Display Configuration	Result
%cityname Air Quality is <b>%impact</b>.	Beijing Air Quality is Good.
%aqi <small>(%impact)</small>	34 Beijing Air Quality. 34 Good Updated on Sunday 10:00 PM2.5 AQI 21 PM10 AQI 8 O3 AQI 34 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information. (Good)
<span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span>	Beijing AQI: Good
%cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date)	Beijing Air Quality is Good ( 34 Beijing Air Quality. 34 Good Updated on Sunday 10:00 PM2.5 AQI 21 PM10 AQI 8 O3 AQI 34 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information. on Sunday 10:00)
%cityname Air Quality is provided by %attribution	Beijing Air Quality is provided by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心)
<div style='%style;max-width:180px;text-align:center;'><small>%cityname AQI:</small> <div style='font-size:88px;height:60px;padding-top:30px;'>%aqiv</div> %impact</div>	Beijing AQI: 34 Beijing Air Quality. 34 Good Updated on Sunday 10:00 PM2.5 AQI 21 PM10 AQI 8 O3 AQI 34 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information. Good
%details	Beijing Air Quality. 34 Good Updated on Sunday 10:00 PM2.5 AQI 21 PM10 AQI 8 O3 AQI 34 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

หากคุณต้องการบูรณาการ DIY คุณยังสามารถระบุการเรียกกลับฟังก์ชันจาวาสคริปต์ให้เป็นเมื่อมีการโหลดข้อมูลได้ คุณเพียงแค่ต้องเพิ่มตัวเลือก callback ในบล็อกพารามิเตอร์ เช่น:

  
_aqiFeed({  city:"beijing",  callback:function(aqi){  
	/*  Do  whatever  you  want  with  the  AQI  object  */  
	console.log(aqi);    
}  });

ตัวอย่างเช่น สมมติว่าคุณใช้ jquery อยู่ด้วย รหัสต่อไปนี้:

  
<div  id='my-container'></div>  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  
		city:  "beijing",  lang:  "pl",  callback:  function  (aqi)  {  
			$("#my-container").html(aqi.details);  
		}  
	});  
</script>

จะผลิตเนื้อหาดังต่อไปนี้:

Pekin Jakość powietrza.

34

Good

Poprawiony: Niedziela 10:00

PM2.5 AQI		21
PM10 AQI		8
O3 AQI		34

Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

วัตถุ aqi มีคำสำคัญทั้งหมดที่กล่าวถึงในส่วน C (รูปแบบการแสดงผล)

สามารถรวมวิดเจ็ตหลายรายการไว้ในหน้าเดียวได้ สิ่งที่คุณต้องทำก็แค่ส่งอาร์เรย์ที่มีวิดเจ็ตทั้งหมดที่คุณต้องการรวมไปยังฟังก์ชัน `_aqiFeed` ตัวอย่างเช่น หากต้องการแทรกลอนดอน ปารีส และนิวยอร์ก สามารถใช้โค้ดนี้:

  
var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  
  
var  aqiWidgetConfig  =  [];    
cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
_aqiFeed(aqiWidgetConfig);  
  
function  displayCity(aqi)  {  
	$("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
}  

London

99

London Air Quality.

99

Moderate

Updated on Sunday 2:00

PM2.5 AQI		99
PM10 AQI		42
O3 AQI		15

Data monitored by UK-AIR, air quality information resource - Defra, UK , London Air Quality Network - Environmental Research Group, King's College London . Click for more information.

Sunday 2:00

New-york

-

New-york Air Quality.

-

Not Available

Never updated!

Data monitored by . Click for more information.

Thursday 9:00

Seoul

50

Seoul Air Quality.

50

Good

Updated on Sunday 12:00

PM2.5 AQI		34
PM10 AQI		33
O3 AQI		50

Data monitored by South Air Korea Environment Corporation (대기오염실시간공개시스템) , Seoul Clean Air Pollution Information (서울특별시 기후대기환경정보) . Click for more information.

Sunday 12:00

Guangzhou

-

Guangzhou Air Quality.

-

Not Available

Updated on Tuesday, Mar 4th 2025

PM2.5 AQI

-

Data monitored by Guangzhou Environmental Protection Bureau (广州市生态环境局) , China National Urban air quality real-time publishing platform (全国城市空气质量实时发布平台) , U.S. Consulate Guangzhou Air Quality Monitor . Click for more information.

Tuesday 20:00

Naitōmachi, Shinjuku-ku, Tōkyō-to

114

Naitōmachi, Shinjuku-ku, Tōkyō-to Air Quality.

114

Unhealthy for Sensitive Groups

Updated on Sunday 10:00

PM2.5 AQI		114
PM10 AQI		20
O3 AQI		42

Data monitored by Japan Atmospheric Environmental Regional Observation System (環境省大気汚染物質広域監視システム) . Click for more information.

Sunday 10:00

Shanghai

57

Shanghai Air Quality.

57

Moderate

Updated on Sunday 10:00

PM2.5 AQI		57
PM10 AQI		35
O3 AQI		33

Data monitored by Shanghai Environment Monitoring Center(上海市环境监测中心) , China National Urban air quality real-time publishing platform (全国城市空气质量实时发布平台) , U.S. Consulate Shanghai Air Quality Monitor . Click for more information.

Sunday 10:00

Paris

65

Paris Air Quality.

65

Moderate

Updated on Sunday 2:00

PM2.5 AQI		65
PM10 AQI		19
O3 AQI		26

Data monitored by AirParif - Association de surveillance de la qualité de l'air en Île-de-France , European Environment Agency . Click for more information.

Sunday 2:00

HongKong

52

HongKong Air Quality.

52

Moderate

Updated on Sunday 9:00

PM2.5 AQI		52
PM10 AQI		11
O3 AQI		24

Data monitored by Hong Kong Environmental Protection Department - 空氣質素健康指數單張及海報 . Click for more information.

Sunday 9:00

ฟีดวิดเจ็ตนี้ให้บริการฟรี และเพื่อจุดประสงค์เดียวในการรวมฟีดเข้ากับเว็บไซต์อื่น ๆ (เช่น ไม่รวมแอป) และอยู่ภายใต้เงื่อนไขของการใช้งานที่สมเหตุสมผลและยอมรับได้ เราขอสงวนสิทธิ์ในการเปลี่ยนแปลงโครงสร้างฟีด (รูปแบบข้อมูล) ได้ตลอดเวลาโดยไม่ต้องแจ้งให้ทราบล่วงหน้า ดังนั้น โปรดติดต่อเราหากคุณวางแผนที่จะทำการผสานรวมแบบกำหนดเอง

เมื่อทำการผสานรวม มีกฎการ กำจัดทันตกรรม บางประการที่ควรนำมาใช้เมื่อใช้ฟีดข้อมูล:

• ขั้นแรก ตรวจสอบให้แน่ใจเสมอว่ามีการระบุแหล่งที่มาของ EPA แหล่งกำเนิดอยู่ ข้อมูลคุณภาพอากาศทั้งหมดที่คุณสามารถหาได้ในโครงการดัชนีคุณภาพอากาศโลกนั้นต้องขอบคุณการทำงานหนักจากสำนักงานปกป้องสิ่งแวดล้อมทั่วโลก ดังนั้นโปรดตรวจสอบให้แน่ใจว่าได้ระบุแหล่งที่มาสำหรับงานของพวกเขาด้วย หากคุณใช้ API แบบเป็นโปรแกรม การระบุแหล่งที่มาจะพร้อมใช้งานจากช่องการ attribution
• หากคุณมาจากสถาบันและใช้ข้อมูลดังกล่าว โปรดแสดงความเคารพและคืนเงินให้กับผลงานของเรา หากคุณกำลังพยายามคัดลอกฟีดข้อมูล โปรดทราบว่าโครงการนี้อาศัยโครงการสนับสนุนและความร่วมมือ ดังนั้นควรพิจารณา สนับสนุนเรา มากกว่าที่จะทิ้งเรา โดยเฉพาะอย่างยิ่งหากคุณเป็นสถาบันหรือมหาวิทยาลัยขนาดใหญ่
• ตามความเป็นจริง อย่าทำตัวเหมือน WRI ( World Resource Institute ) : ทำลายฟีดข้อมูลโครงการ ดัชนีคุณภาพอากาศโลก โดยรวม และทำราคาถูกมากจนไม่ระบุแหล่งที่มาสำหรับงานของเราด้วยซ้ำ และสิ่งนี้แม้จะอายุ 80 แล้วก็ตาม เงินทุนปีละหลายล้านเหรียญสหรัฐ ไม่เชื่อเราเหรอ? ตรวจสอบ ภาพรวม นี้

นี่เป็นเวอร์ชันแรกของ API ฟีดวิดเจ็ตใหม่นี้ มีการปรับปรุงอยู่บ้างในขั้นตอนการทำงาน เช่น ความกว้างและความสูงของกราฟิกที่ปรับได้ ขนาด AQI ที่เลือกได้ เป็นต้น หากคุณต้องการแนะนำการปรับปรุงเฉพาะอื่นๆ โปรดส่งข้อความถึงเราได้เลย