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