在介绍之前,你需要了解HTML,JSON,以及JS有一定的了解。
PM25.IN网址:http://www.pm25.in/api_doc,为了让更多人更快更好的知道PM2.5,我们做了一个艰难的决定,决定无偿开放PM2.5数据接口,以方便更多的开发者使用!
如果你需要经常调用的话,建议你申请下密钥,由于我调用次数不多,所以使用的是公测密钥。
公共测试AppKey:5j1znBVAsnSf5xQyNQyq。
Pm25.in API注意事项如下:
1、所有API的调用,必须附带"token"这个参数,即申请的AppKey;
2、API中的'city'参数支持中文、拼音和区号,例如:"city=广州","city=guangzhou","city=020";
3、因为参数使用中文需要encode,所以推荐开发者city参数尽量使用拼音;
4、重名情况:泰州的拼音为"taizhoushi",台州的拼音为"taizhou";
5、API返回的JSON格式数据是经过UTF-8编码的,这个文档里的"成功返回示例"为了直观,已经decode过;
6、由于有些开发者对API调用过于频繁,严重影响了服务器,现在对API调用次数作出调整:1.10和1.11每小时15次、1.12每小时5次、1.13每小时15次,其余每小时500次;
7、由于数据源方面的原因,API中的24小时均值、station_code有时返回可能为空;
下面我以获取一个城市所有监测点的PM2.5数据,为例介绍下,获取后的JSON数据如何调用以及处理。
地址 http://www.pm25.in/api/querys/pm2_5.json
方法 GET
参数
* city:城市名称,必选参数
* avg:是否返回一个城市所有监测点数据均值的标识,可选参数,默认是true,不需要均值时传这个参数并设置为false
* stations:是否只返回一个城市均值的标识,可选参数,默认是yes,不需要监测点信息时传这个参数并设置为no,返回
一个数组,里面的一项是一个监测点的PM2.5信息,其中每一项数据包括
* aqi
* area
* pm2_5
* pm2_5_24h
* position_name
* primary_pollutant
* quality
* station_code
* time_point
默认情况下,最后一项是所有监测点的均值(即一个城市的值)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seniverse API Jsonp Test Page</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="content" style="height:300px;width:600px;background:blue;">
</div>
<div id="view" style="height:300px;width:600px;background:red;position:absolute;bottom:20px;">
<script>
var KEY = "5j1znBVAsnSf5xQyNQyq"; // 测试用key,请更换成您自己的 Key
var API = "http://www.pm25.in/api/querys/pm2_5.json";
var CITY = "shanghai"; // 因为参数使用中文需要encode,所以推荐开发者city参数尽量使用拼音;
var PMjsonpCallbackdemo = function(data) {
var life = data;//取出Json数据并存入life中
var text = [];
//显示方式一
var obj = document.getElementById('content');
text.push("AQI: " + life[0].aqi);//利用文本推的方式将文本显示在界面中。
text.push("Position_Name: " + life[0].position_name);
text.push("PM2.5: " + life[0].pm2_5);
text.push("PM2.5_24h: " + life[0].pm2_5_24h);
text.push("Primary_Pollutant: " + life[0].primary_pollutant);
text.push("Quality: " + life[0].quality);
text.push("UpdateTime: " + life[0].time_point);
obj.innerText = text.join("\n");
//显示方式二
document.getElementById("view").innerHTML=(life[1].aqi+life[0].aqi)/2;
}
var url = API + "?city=" + CITY + "&" + "token=" + KEY + "&callback=PMjsonpCallbackdemo";
// 向 HTML 中动态插入 script 标签,通过 JSONP 的方式进行调用
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
$('body').append(newScript);
</script>
</body>
</html>
获取得到的json数据
[
{
aqi: 50,
area: "上海",
pm2_5: 26,
pm2_5_24h: 24,
position_name: "十五厂",
primary_pollutant: null,
quality: "优",
station_code: "1142A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 46,
area: "上海",
pm2_5: 26,
pm2_5_24h: 22,
position_name: "虹口",
primary_pollutant: null,
quality: "优",
station_code: "1143A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 37,
area: "上海",
pm2_5: 16,
pm2_5_24h: 20,
position_name: "徐汇上师大",
primary_pollutant: null,
quality: "优",
station_code: "1144A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 53,
area: "上海",
pm2_5: 26,
pm2_5_24h: 25,
position_name: "杨浦四漂",
primary_pollutant: "颗粒物(PM10)",
quality: "良",
station_code: "1145A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 55,
area: "上海",
pm2_5: 33,
pm2_5_24h: 28,
position_name: "青浦淀山湖",
primary_pollutant: "臭氧1小时",
quality: "良",
station_code: "1146A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 46,
area: "上海",
pm2_5: 24,
pm2_5_24h: 22,
position_name: "静安监测站",
primary_pollutant: null,
quality: "优",
station_code: "1147A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 42,
area: "上海",
pm2_5: 13,
pm2_5_24h: 18,
position_name: "浦东川沙",
primary_pollutant: null,
quality: "优",
station_code: "1148A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 44,
area: "上海",
pm2_5: 19,
pm2_5_24h: 21,
position_name: "浦东新区监测站",
primary_pollutant: null,
quality: "优",
station_code: "1149A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 43,
area: "上海",
pm2_5: 23,
pm2_5_24h: 23,
position_name: "浦东张江",
primary_pollutant: null,
quality: "优",
station_code: "1150A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 48,
area: "上海",
pm2_5: 29,
pm2_5_24h: 21,
position_name: "普陀",
primary_pollutant: null,
quality: "优",
station_code: "1141A",
time_point: "2017-05-20T13:00:00Z"
},
{
aqi: 56,
area: "上海",
pm2_5: 23,
pm2_5_24h: 22,
position_name: null,
primary_pollutant: "臭氧8小时",
quality: "良",
station_code: null,
time_point: "2017-05-20T13:00:00Z"
}
]
最后处理得到的界面:
小demo的界面
实际使用时候的界面
如果各位有什么不懂的地方,欢迎在我的博客网网站www.shaofee.com留言咨询。