神刀安全网

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

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

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

今天天气

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

这周天气

最主要的肯定是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_weekgetTodayWeather,去获得今天的天气和这周的天气。

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);

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 使用百度天气API实现自己的天气预报

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址