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

来源：互联网发布：网络玄幻小说合集下载编辑：程序博客网时间：2024/05/16 06:37

昨天在简书看到一篇帖子是关于百度天气API的，感觉很棒，所以今天自己也写了个自己的天气预报，利用jsonp跨域请求，实现自己的天气预报展示。展示github链接：https://spiritliftedhigh.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/SpiritLiftedHigh/weatherForecast，觉得可以的话给个星吧！

0 0