宜蘭縣教育支援平台 會員登入 會員註冊 我的i教書

« 上一篇 | 下一篇 »

在網頁上內嵌PM2.5資料,可以快速知道現在的空氣品質。

--------------------------------------------------------

1.點下面連結

https://list.airmap.g0v.tw/

 

2.選擇您想要的PM2.5測站,右下角[Wideg]

 3.有三種樣式,選擇您希望呈現的樣式,將HTML碼複製到您的網頁,就完成了。

一般使用紅色框框內的HTML碼,如果無法顯示,可以改用藍色框框內的HTML碼(宜蘭縣教網部落格)。

--------------------------------------------------------------------------

注意:這裡取得的溫度是空氣盒子裡溫溼度感測器測到的溫度,會比實際室溫高一點。

如果您的網頁系統比較舊,可能不支援新的程式碼格式,可以修改下面的程式碼。

在上面步驟2中將測站的編號複製下來,取代下面程式碼的紅色部分。

以下是三種不同的形式的程式碼

PM2.5即時顯示(thin)

    <iframe frameborder="0" height="150" src="http://airmap.g0v.asper.tw/widget/thin/LASS-Airbox$74DA38F208E2" width="100%"></iframe>

PM2.5即時顯示(text)

    <iframe frameborder="0" height="250" src="http://airmap.g0v.asper.tw/widget/text/LASS-Airbox$74DA38F208E2" width="100%"></iframe>

PM2.5顯示(marker)

    <iframe frameborder="0" height="200" src="http://airmap.g0v.asper.tw/widget/marker/LASS-Airbox$74DA38F208E2" width="100%"></iframe>

感謝 G0V 徐烱騰 (Asper Hsu) 先生提供支援。

------------------------

相關聯結:

網頁內嵌PM2.5即時資料顯示
http://blog.ilc.edu.tw/blog/blog/868/post/97509/753091

PM2.5空氣品質自動Line通知
http://blog.ilc.edu.tw/blog/blog/868/post/2172/718940

JSON格式資料運用
http://blog.ilc.edu.tw/blog/blog/868/post/97509/677614

PM2.5超標自動發Line警示
http://blog.ilc.edu.tw/blog/blog/868/post/97509/675501

PM2.5環境監測超簡單
http://blog.ilc.edu.tw/blog/blog/868/post/97509/652136

OLED(有機發光二極體)
http://blog.ilc.edu.tw/blog/blog/868/post/104089/695595

液晶顯示器(LCD)
http://blog.ilc.edu.tw/blog/blog/868/post/97509/683820

Arduino課程目錄
http://blog.ilc.edu.tw/blog/blog/868/post/97509/641433

新DiFi課程目錄
http://blog.ilc.edu.tw/blog/blog/868/post/104089/678192




 
 
 
用LINE傳送