❗️你有0条未读消息

业余项目之利用天气API实现简单的城市天气预报

近期在学习一些web全栈的东西,业余时间做了些小项目。这个天气预报的小项目属于其中之一。本身技术没有什么难的,主要是找免费可用的天气API比较费劲。最后还是使用了百度的开放API,中国天气的就不说了,打开个链接都费劲,好不容易进去了,注册的时候提示你”内部服务器错误”。。据说还不免费,纳税人交钱建立的组织,数据使用下还要交钱,哪说理去。百度的API还不错,只是没有雾霾指数。简单记录如下。

HTML容器

使用bootstrap布局,当天的预报信息显示一行,其余三天信息缩小放在下一行(百度API只提供四天的天气预测)。
每天的天气信息包括:一个天气图标(可随天气变化),一个温度显示。
再下一行显示本地城市信息、天气情况以及风力情况。
效果如下:

天气API

1.首先需要加载百度的API库

1
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>

2.定位城市
定位城市我之前想用浏览器的navigator获取经纬度来实现,实践中发现难度还是比较大的。而用IP来定位的话,上述百度API直接提供了,那直接用IP来定位好了,虽然精度不那么准确,也许获取不到牛家庄的天气获取个杭州南京什么的还是不在话下的。

1
2
var myCity = new BMap.LocalCity();
myCity.get(myFun);

加载了API库后,直接生成一个BMap LocalCity对象即可,传入get方法的函数(获取到城市后的回调函数)里就可以做各种事情了。

3.获取天气数据
接口调用方式:

1
http://api.map.baidu.com/telematics/v3/weather?location=<城市名>&output=<json|xml>&ak=yourkey

只需传入参数城市名以及输出格式即可。
这里需要注意的是,传入的城市名形如,”南京”,”北京”这样,而通过API获取的城市名是”南京市”,”北京市”这样,因此在传入的前需要做一下处理。

1
cityName.split("市")[0];

输出格式建议使用JSON,便于解析处理。
另外,js在请求数据时,由于跨域请求不被允许,因此需要使用jsonp访问。

1
2
3
4
5
6
7
8
9
$.ajax({
url: "http://api.map.baidu.com/telematics/v3/weather?location=" + cityName + "&output=json&ak=你的key",
dataType: "jsonp",
callback: "callback",
success: function(ret){
//do something
... ...
}
});

4.解析数据
上述接口返回的信息格式如下:

取出results的weather_data字段即可,数组每个元素存储了一天的天气情况。使用js将对应的信息填充到相应的HTML容器里去即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var container = ["#today","#next1","#next2","#next3"];
var result = ret.results[0];
var weather_data = result.weather_data;

//城市、风力
$("#location").html(result.currentCity);
$("#weather").html(result.weather_data[0].weather);
$("#wind").html(result.weather_data[0].wind);

//天气情况
for(var i in weather_data){
$(container[i] + " img").attr("src",weather_data[i].dayPictureUrl);
$(container[i] + " .temp").html(weather_data[i].temperature);
}

至于根据天气情况变换背景什么的,准备几张不同天气的背景图,根据不同的天气状况使用js替换相应的background-image的url就好了~

点击查看效果
项目开源地址

赞 赏

如果你觉得本文还不错的话也可以赞赏一点~


便宜好用的大牌VPS--Vultr,每月2.5美元,新人注册送50美元使用抵扣
评论
0条评论
还没有评论,大侠坐个沙发?