jQ、Yahoo API和HTML 5開發天氣預報應用

作者：gbin1 2012-06-18 15:40:32

使用Geolocation取得用戶的地理位置信息，然后，使用yahoo的 PlaceFinder API，來通過經緯度來找到具體地點，例如，城市或者國家。其中包括了woeid，這個用來在天氣預報應用中找到國家。

使用jQuery，Yahoo API和HTML5的geolocation來開發一個天氣預報web應用

今天我們介紹來自tutorialzine的一個HTML5/jQuery/Yahoo API的開發教程，在這篇文章中我們將介紹如何使用HTML5的Geolocation，jQuery和YahooAPI來開發一個天氣預報web應用。如果你不熟悉HTML5的Geolocation（地理位置服務），請參考我們的HTML5教程： HTML5 Geolocation。

首先你需要得到Yahoo API的API key，你可以通過如下地址取得對應的API key：https://developer.apps.yahoo.com/dashboard/createKey.html

以上創建過程中會要求你輸入相關應用地址等信息。創建成功后，你可以得到APPID。

主要思路

在這個教程中，我們主要思路如下：

使用Geolocation取得用戶的地理位置信息

然后，使用yahoo的 PlaceFinder API，來通過經緯度來找到具體地點，例如，城市或者國家。其中包括了woeid，這個用來在天氣預報應用中找到國家。

最后，我們將調用yahoo的Weather API來取得天氣。

web應用代碼

#p#

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="gbk" /> 
        <title>Weather Forecast with jQuery &amp; Yahoo APIs</title> 
          
        <!-- The stylesheet --> 
        <link rel="stylesheet" href="assets/css/styles.css" /> 
          
        <!-- Google Fonts --> 
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Playball|Open+Sans+Condensed:300,700" /> 
          
        <!--[if lt IE 9]> 
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
        <![endif]--> 
    </head> 
      
    <body> 
 
        <header> 
            <h1>Weather Forecast</h1> 
        </header> 
          
        <div id="weather"> 
 
            <ul id="scroller"> 
                <!-- The forecast items will go here --> 
            </ul> 
              
            <a href="#" class="arrow previous">Previous</a> 
            <a href="#" class="arrow next">Next</a> 
              
        </div> 
          
        <p class="location"></p> 
          
        <div id="clouds"></div> 
          
        <footer> 
            <h2><i>Tutorial:</i> Weather Forecast with jQuery &amp; Yahoo APIs</h2> 
            <a class="tzine" href="http://tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/">Head on to <i>Tutorial<b>zine</b></i> to download this example</a> 
        </footer> 
          
        <!-- JavaScript includes - jQuery, turn.js and our own script.js --> 
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
        <script src="assets/js/script.js" charset="utf-8"></script> 
          
    </body> 
</html>

#p#

Javascript

$(function(){  
      
    /* Configuration */ 
      
    var APPID = 'fa2pT26k';        // Your Yahoo APP id  
    var DEG = 'c';        // c for celsius, f for fahrenheit  
      
    // Mapping the weather codes returned by Yahoo's API  
    // to the correct icons in the img/icons folder  
      
    var weatherIconMap = [  
        'storm', 'storm', 'storm', 'lightning', 'lightning', 'snow', 'hail', 'hail',  
        'drizzle', 'drizzle', 'rain', 'rain', 'rain', 'snow', 'snow', 'snow', 'snow',  
        'hail', 'hail', 'fog', 'fog', 'fog', 'fog', 'wind', 'wind', 'snowflake',  
        'cloud', 'cloud_moon', 'cloud_sun', 'cloud_moon', 'cloud_sun', 'moon', 'sun',  
        'moon', 'sun', 'hail', 'sun', 'lightning', 'lightning', 'lightning', 'rain',  
        'snowflake', 'snowflake', 'snowflake', 'cloud', 'rain', 'snow', 'lightning' 
    ];  
      
    var weatherDiv = $('#weather'),  
        scroller = $('#scroller'),  
        location = $('p.location');  
      
    // Does this browser support geolocation?  
    if (navigator.geolocation) {  
        navigator.geolocation.getCurrentPosition(locationSuccess, locationError);  
    }  
    else{  
        showError("Your browser does not support Geolocation!");  
    }  
      
    // Get user's location, and use Yahoo's PlaceFinder API  
    // to get the location name, woeid and weather forecast  
      
    function locationSuccess(position) {  
        var lat = position.coords.latitude;  
        var lon = position.coords.longitude;  
 
        // Yahoo's PlaceFinder API http://developer.yahoo.com/geo/placefinder/  
        // We are passing the R gflag for reverse geocoding (coordinates to place name)  
        var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=J&gflags=R&appid='+APPID;  
          
        // Forming the query for Yahoo's weather forecasting API with YQL  
        // http://developer.yahoo.com/weather/  
          
        var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',  
            weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',  
            code, city, results, woeid;  
          
        if (window.console && window.console.info){  
            console.info("Coordinates: %f %f", lat, lon);  
        }  
          
        // Issue a cross-domain AJAX request (CORS) to the GEO service.  
        // Not supported in Opera and IE.  
        $.getJSON(geoAPI, function(r){  
             
            if(r.ResultSet.Found == 1){  
                  
                results = r.ResultSet.Results;  
                city = results[0].city;  
                code = results[0].statecode || results[0].countrycode;  
          
                // This is the city identifier for the weather API  
                woeid = results[0].woeid;  
      
                // Make a weather API request:  
                $.getJSON(weatherYQL.replace('WID',woeid), function(r){  
                      
                    if(r.query && r.query.count == 1){  
                          
                        // Create the weather items in the #scroller UL  
                          
                        var item = r.query.results.channel.item.condition;  
                          
                        if(!item){  
                            showError("We can't find weather information about your city!");  
                            if (window.console && window.console.info){  
                                console.info("%s, %s; woeid: %d", city, code, woeid);  
                            }  
                              
                            return false;  
                        }  
                          
                        addWeather(item.code, "Now", item.text + ' <b>'+item.temp+'°'+DEG+'</b>');  
                          
                        for (var i=0;i<2;i++){  
                            item = r.query.results.channel.item.forecast[i];  
                            addWeather(  
                                item.code,   
                                item.day +' <b>'+item.date.replace('\d+$','')+'</b>',  
                                item.text + ' <b>'+item.low+'°'+DEG+' / '+item.high+'°'+DEG+'</b>' 
                            );  
                        }  
                          
                        // Add the location to the page  
                        location.html(city+', <b>'+code+'</b>');  
                          
                        weatherDiv.addClass('loaded');  
                          
                        // Set the slider to the first slide  
                        showSlide(0);  
                     
                    }  
                    else {  
                        showError("Error retrieving weather data!");  
                    }  
                });  
          
            }  
              
        }).error(function(){  
            showError("Your browser does not support CORS requests!");  
        });  
         
    }  
      
    function addWeather(code, day, condition){  
          
        var markup = '<li>'+  
            '<img src="assets/img/icons/'+ weatherIconMap[code] +'.png" />'+  
            ' <p class="day">'+ day +'</p> <p class="cond">'+ condition +  
            '</p></li>';  
          
        scroller.append(markup);  
    }  
      
    /* Handling the previous / next arrows */ 
      
    var currentSlide = 0;  
    weatherDiv.find('a.previous').click(function(e){  
        e.preventDefault();  
        showSlide(currentSlide-1);  
    });  
      
    weatherDiv.find('a.next').click(function(e){  
        e.preventDefault();  
        showSlide(currentSlide+1);  
    });  
      
      
    function showSlide(i){  
        var items = scroller.find('li');  
          
        if (i >= items.length || i < 0 || scroller.is(':animated')){  
            return false;  
        }  
          
        weatherDiv.removeClass('first last');  
          
        if(i == 0){  
            weatherDiv.addClass('first');  
        }  
        else if (i == items.length-1){  
            weatherDiv.addClass('last');  
        }  
          
        scroller.animate({left:(-i*100)+'%'}, function(){  
            currentSlide = i;  
        });  
    }  
      
    /* Error handling functions */ 
      
    function locationError(error){  
        switch(error.code) {  
            case error.TIMEOUT:  
                showError("A timeout occured! Please try again!");  
                break;  
            case error.POSITION_UNAVAILABLE:  
                showError('We can\'t detect your location. Sorry!');  
                break;  
            case error.PERMISSION_DENIED:  
                showError('Please allow geolocation access for this to work.');  
                break;  
            case error.UNKNOWN_ERROR:  
                showError('An unknown error occured!');  
                break;  
        }  
          
    }  
      
    function showError(msg){  
        weatherDiv.addClass('error').html(msg);  
    }  
 
});

搞定！具體演示請參考在線Demo，希望大家喜歡這個web應用！

原文鏈接：http://www.cnblogs.com/gbin1/archive/2012/06/14/2549525.html

【編輯推薦】

jQuery 煙花效果（運動相關）
到處都是jQuery選擇器的年代
jQuery:讓文盲秀網頁
新版jQuery div彈出層的ajax登錄
jQuery圖片延遲加載技術的應用

責任編輯：張偉來源： gbin1的博客

jQuery