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

来源：互联网发布：淘宝助理获取订单编辑：程序博客网时间：2024/05/17 17:42

在线演示本地下载

今天我们介绍来自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应用！