使用jQuery、YahooAPI和HTML5的geolocation来开发一个天气预报web应用.doc

使用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：/dashboard/createKey.html以上创建过程中会要求你输入相关应用地址等信息。创建成功后，你可以得到APPID。主要思路在这个教程中，我们主要思路如下：1. 使用Geolocation取得用户的地理位置信息 2. 然后，使用yahoo的 PlaceFinder API，来通过经纬度来找到具体地点，例如，城市或者国家。 其中包括了woeid，这个用来在天气预报应用中找到国家 3. 最后，我们将调用yahoo的Weather API来取得天气 web应用代码HTML Weather Forecast with jQuery & Yahoo APIs Weather Forecast Previous Next Tutorial: Weather Forecast with jQuery & Yahoo APIs Head on to Tutorialzine to download this example 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 Yahoos 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 users location, and use Yahoos PlaceFinder API / to get the location name, woeid and weather forecast function locationSuccess(position) var lat = position.coords.latitude; var lon = position.coords.longitude; / Yahoos PlaceFinder API /geo/placefinder/ / We are passing the R gflag for reverse geocoding (coordinates to place name) var geoAPI = /geocode?location=+lat+,+lon+&flags=J&gflags=R&appid=+APPID; / Forming the query for Yahoos weather forecasting API with YQL / /weather/ var wsql = select * from weather.forecast where woeid=WID and u=+DEG+, weatherYQL = /v1/public/yql?q=+encodeURIComponent(wsql)+&format=json&callback=?, code, city, results, woeid; if (window.console & ) (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 = results0.city; code = results0.statecode | results0.countrycode; / This is the city identifier for the weather API woeid = results0.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 cant find weather information about your city!); if (window.console & ) (%s, %s; woeid: %d, city, code, woeid); return false; addWeather(item.code, Now, item.text + +item.temp+DEG+); for (var i=0;i2;i+) item = r.query.results.channel.item.forecasti; addWeather( item.code, item.day + +item.date.replace(d+$,)+, item.text + +item.low+DEG+ / +item.high+DEG+ ); / Add the location to the page location.html(city+, +code+); 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 = + + + day + + condition + ; 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 cant detect your location. Sorry!); break; case error.PERMISS