运用jQuery、Yahoo API和HTML5的geolocation来开发一个天气预报web应用 _Web前端

使用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应用代码

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>

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应用！