2012年10月20日 星期六

使用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

透過定位取得天氣狀態
  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取得天氣資訊
  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上
  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跟行為,就可以使用了。
反應:

3 意見:

pfg1203 提到...

如果可以註明一下插入點在哪一行,這樣要看會比較快 XD

Jason Jiang 提到...

意思是標這段是在source code哪一行嗎

匿名 提到...

安安

Related Posts Plugin for WordPress, Blogger...