使用百度天气API实现自己的天气预报

昨天在简书看到一篇帖子是关于百度天气API的，感觉很棒，所以今天自己也写了个自己的天气预报，利用jsonp跨域请求，实现自己的天气预报展示。展示github链接：https://lwjcode.github.io/weatherForecast/weather.html
如图：

最主要的肯定是js了，接下来看一下如何实现：

1. 获得自己所在的当前城市

这个百度地图给了API，我们只要调用就可以，代码如下：

    //用百度地图API获得当前所在城市var map = new BMap.Map('map');var myCity = new BMap.LocalCity();var cityName;myCity.get(myFun); //异步获得当前城市function myFun(result){cityName = result.name.replace('市', '');}

这个是获得城市名字，是异步的，所以一定要确保城市名已获得后再利用jsonp发送请求函数，不然会出错。

2. 发送jsonp跨域请求

    //动态创建script标签function jsonp(url){var script = document.createElement('script');script.src = url;document.body.append(script);document.body.removeChild(script);}//设置延时，因为获得当前城市所在地是异步的setTimeout(function(){var urls = []; urls[0] = 'http://sapi.k780.com/?app=weather.future&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=getWeather_week&weaid=' + encodeURI(cityName);urls[1] = 'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=FK9mkfdQsloEngodbFl4FeY3&callback=getTodayWeather&location=' + encodeURI(cityName);jsonp(urls[0]);  //jsonp跨域请求jsonp(urls[1]);}, 1000);

这样就获得了当前自己所在城市的天气，在src里面传递了两个函数，分别是getWeather_week和 getTodayWeather，去获得今天的天气和这周的天气。

3.解析json数据，写入DOM

{data:"周一 04月17日 (实时：23℃)"dayPictureUrl:"http://api.map.baidu.com/images/weather/day/qing.png"nightPictureUrl:"http://api.map.baidu.com/images/weather/night/qing.png"temperature:"28 ~ 11℃"weather:"晴"wind:"东风微风"
}

这是我从控制台复制的一段json数据，只要根据里面的键名获得数据，并写入DOM节点即可。

4. 为查询天气按钮添加事件，获得任意城市的天气

//添加事件，查询天气document.getElementById('search').addEventListener('click', function (){var cityname = document.getElementById('input-weather').value;if (cityname != ''){var urls = []; urls[0] = 'http://sapi.k780.com/?app=weather.future&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=getWeather&weaid=' + encodeURI(cityname);urls[1] = 'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=FK9mkfdQsloEngodbFl4FeY3&callback=getTodayWeather&location=' + encodeURI(cityname);jsonp(urls[0]);jsonp(urls[1]);}}, true);

注意：以上jsonp请求的接口链接都是别人的，可能会失效，当然可以自己去申请，所以直接用的话，可能会出错，望见谅！

大概的步骤就是这样，感兴趣的话可以自己实现一下的。源码参考github：https://github.com/lwjcode/weatherForecast，觉得可以的话给个星吧！

使用百度天气API实现自己的天气预报相关推荐

百度首页天气html制作,使用百度天气API实现自己的天气预报
昨天在简书看到一篇帖子是关于百度天气API的,感觉很棒,所以今天自己也写了个自己的天气预报,利用jsonp跨域请求,实现自己的天气预报展示.展示github链接:https://lwjcode.git ...
使用百度天气API制作天气组件
这里写自定义目录标题百度天气APi 百度API调用处理思路代码层面得实现文件介绍百度天气APi 目前百度天气API提供全国得实时查询,但是没有提供历史查询,在一些应用中需要天气模块,如果是和 ...
Android调用新版百度天气api，解决地理编码问题
我在学习制作天气预报app的时候,先调用新版百度地图api时发现,百度取消了原有api链接的city参数,反倒是改为了district_id,看到这个的时候我一脸蒙蔽,全国那么多地区,我要怎么一一获取 ...
python通过调用百度天气API接口获取天气信息
python调用百度接口,获取天气信息需要到百度注册开发者账号,通过账号获取到每个账号私有的应用访问(AK) 使用此脚本还需要district_id.csv文档,在我资源中可以免费下载,也可在百度天 ...
使用和风天气 API 10分钟搭建天气预报数据看板
本文首发:<使用和风天气 API 10分钟搭建天气预报数据看板)> 使用和风天气 API 10分钟搭建天气预报数据看板第 1 步:注册和风天气 API 及卡拉云 (1)注册和风天气 AP ...
html百度天气api,百度API 免费接口获取天气预报
百度API 免费接口获取天气预报发布时间:2020-08-06 05:38:12 来源:51CTO 阅读:4726 作者:大大果 Document #result{width: 800px;bord ...
php 调取百度天气api
现在,不用守着晚上7点半的时间去看第二天的天气预报,只要你有手机,有网络,便可以轻松查询实时天气,可你知道怎么用PHP实现的吗?本文将带大家学习一种调用百度天气接口的方式,直接在PHP上查看实时天气, ...
android百度天气预报接口,用百度天气接口的实现安卓天气预报（json数据）
代码地址: 具体思路: 1.写一个线程,其中city_str就是城市名,例如 city_str="宁波"; 2.然后通过线程取百度天气接口json数据 (注意不要用ie开这个网址, ...
微信公众平台整合百度天气API
2019独角兽企业重金招聘Python工程师标准>>> 由于自己闲着的时候写了一个微信公众平台的小应用也参考了很多别人的源码再此感谢那些被我参考过的大神们本着开源的精神 htt ...

使用百度天气API实现自己的天气预报

使用百度天气API实现自己的天气预报相关推荐

最新文章

热门文章