【ACCESS精品源码栏目提醒】:本文主要为网学会员提供“jQuery+HTML5开发一个天气预报web应用 - 其它资料”,希望对需要jQuery+HTML5开发一个天气预报web应用 - 其它资料网友有所帮助,学习一下!
使用 jQuery 和 HTML5 等开发一个天气预报 web 应用今天我们介绍来自站长
源码 www.vfre.net 的一个 HTML5/jQuery/Yahoo API 的开发教程,在这篇文章中我们将介绍如何使用 HTML5 的 Geolocation,jQuery 和 YahooAPI 来开发一个天气预报 web 应用。
如果你不熟悉 HTML5 的 Geolocation(地理位置服务)。
首先你需要得到 Yahoo API 的 API key,你可以通过如下地址取得对应的 API key:https://developer.apps.yahoo.com/dashboard/createKey.html以上创建过程中会要求你输入相关应用地址等信息。
创建成功后,你可以得到 APPID。
主要思路在这个教程中,我们主要思路如下:1.使用 Geolocation 取得用户的地理位置信息2.然后,使用 yahoo 的 PlaceFinder API,来通过经纬度来找到具体地点,例如,城市或者国家。
其中包括了 woeid,这个用来在天气预报应用中找到国家3.最后,我们将调用 yahoo 的 Weather API 来取得天气web 应用代码HTMLWeather ForecastPreviousNextTutorial: Weather Forecast with jQuery amp Yahoo APIsHead onto Tutorialzine to download this exampleJavascriptfunction/ Configuration /var APPID fa2pT26k // Your Yahoo APP idvar DEG c // c for celsius f for fahrenheit// Mapping the weather codes returned by Yahoos API// to the correct icons in the img/icons foldervar weatherIconMap storm storm storm lightning lightning snow hail haildrizzle drizzle rain rain rain snow snow snow snowhail hail fog fog fog fog wind wind snowflakecloud cloud_moon cloud_sun cloud_moon cloud_sun moon sunmoon sun hail sun lightning lightning lightning rainsnowflake snowflake snowflake cloud rain snow lightningvar weatherDiv weatherscroller scrollerlocation p.location// Does this browser support geolocationif navigator.geolocation navigator.geolocation.getCurrentPositionlocationSuccess locationErrorelseshowErrorYour browser does not support Geolocation// Get users location and use Yahoos PlaceFinder API// to get the location name woeid and weather forecastfunction locationSuccessposition var lat position.coords.latitudevar lon position.coords.longitude// Yahoos PlaceFinder API http://developer.yahoo.com/geo/placefinder/// We are passing the R gflag for reverse geocoding coordinates to place namevar geoAPI http://where.yahooapis.com/geocodelocationlatlonflagsJgflagsRappidAPPID// Forming the query for Yahoos weather forecasting API with YQL// http://developer.yahoo.com/weather/var wsql select from weather.forecast where woeidWID and uDEGweatherYQL http://query.yahooapis.com/v1/public/yqlqencodeURIComponentwsqlformatjsoncallbackcode city results woeidif window.console window.console.infoconsole.infoCoordinates: f f lat lon// Issue a cross-domain AJAX request CORS to the GEO service.// Not supported in Opera and IE..getJSONgeoAPI functionrifr.ResultSet.Found 1results r.ResultSet.Resultscity results0.citycode results0.statecode results0.countrycode// This is the city identifier for the weather APIwoeid results0.woeid// Make a weather API request:.getJSONweatherYQL.replaceWIDwoeid functionrifr.query r.query.count 1// Create the weather items in the scroller ULvar item r.query.results.channel.item.conditionifitemshowErrorWe cant find weather information about your cityif window.console window.console.infoconsole.infos s woeid: d city code woeidreturn falseaddWeatheritem.code Now item.text item.temp°DEGfor var i0i items.length i 0 scroller.is:animatedreturn falseweatherDiv.removeClassfirst lastifi 0weatherDiv.addClassfirstelse if i items.length-1weatherDiv.addClasslastscroller.animateleft:-i100 functioncurrentSlide i/ Error handling functions /function locationErrorerrorswitcherror.code case error.TIMEOUT:showErrorA timeout occured Please try againbreakcase error.POSITION_UNAVAILABLE:showErrorWe cant detect your location. Sorrybreakcase error.PERMISSION_DENIED:showErrorPlease allow geolocation
access for this to work.breakcase error.UNKNOWN_ERROR:showErrorAn unknown error occuredbreakfunction showErrormsgweatherDiv.addClasserror.htmlmsg搞定!具体演示请参考在线 Demo,希望大家喜欢这个 web 应用!