使用百度天氣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，覺得可以的話給個星吧！