使用Yahoo! Weather API

最近好像google weather api停止服務了，今天來Yahoo! Open Hackday就研究一下Yahoo!的weather API，而剛好也看到網路上別人寫的範例，修修改改一下就很好用了。

API說明
Yahoo! Weather API

他的API網址大概如下
http://weather.yahooapis.com/forecastrss?w=location

location是Yahoo!定義的地點代碼，可以到Yahoo! Weather查詢地點代碼。

參考範例
How to use Geolocation and Yahoo’s APIs to build a simple weather webapp

透過定位取得天氣狀態

view plaincopy to clipboardprint?

1. function locationSuccess(position) {   
2.         var lat = position.coords.latitude;   
3.         var lon = position.coords.longitude;   
4.   
5.         var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=J&gflags=R&appid=';   
6.                
7.         var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',   
8.             weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',   
9.             code, city, results, woeid;   
10. }  

透過weatherYQL取得天氣資訊

view plaincopy to clipboardprint?

1. $.getJSON(weatherYQL.replace('WID',woeid), function(r){   
2.                    
3.                 if(r.query && r.query.count == 1){   
4.                        
5.                     // Create the weather items in the #scroller UL   
6.                        
7.                     var item = r.query.results.channel.item.condition;   
8.                        
9.                     if(!item){   
10.                         showError("We can't find weather information about your city!");   
11.                         if (window.console && window.console.info){   
12.                             console.info("%s, %s; woeid: %d", city, code, woeid);   
13.                         }   
14.                            
15.                         return false;   
16.                     }   
17.                        
18.                     addWeather(item.code, "Now", item.text + ' <b>'+item.temp+'°'+DEG+'</b>');   
19.                        
20.                     for (var i=0;i<2;i++){   
21.                         item = r.query.results.channel.item.forecast[i];   
22.                         addWeather(   
23.                             item.code,    
24.                             item.day +' <b>'+item.date.replace('\d+$','')+'</b>',   
25.                             item.text + ' <b>'+item.low+'°'+DEG+' / '+item.high+'°'+DEG+'</b>'  
26.                         );   
27.                     }   
28.                        
29.                     // Add the location to the page   
30.                     location.html(city+', <b>'+code+'</b>');   
31.                        
32.                     weatherDiv.addClass('loaded');   
33.                        
34.                     // Set the slider to the first slide   
35.                     showSlide(0);   
36.                   
37.                 }   
38.                 else {   
39.                     showError("Error retrieving weather data!");   
40.                 }   
41.             });  

把天氣資訊append到DOM上

view plaincopy to clipboardprint?

1. function addWeather(code, day, condition){   
2.            
3.         var markup = '<li>'+   
4.             '<img src="img/icons/'+ weatherIconMap[code] +'.png" />'+   
5.             ' <p class="day">'+ day +  '</p> <p class="cond">'+ condition +   
6.             '</p></li>';   
7.            
8.         scroller.append(markup);   
9.     }  

抓到資料後可以根據自己想要的方式調整UI跟行為，就可以使用了。