使用jqueryyahooapi和html5的geolocation来开发一个天气预报web应用.doc

使用JQUERY、YAHOOAPI和HTML5的GEOLOCATION来开发一个天气预报WEB应用在线演示本地下载今天我们介绍来自TUTORIALZINE的一个HTML5/JQUERY/YAHOOAPI的开发教程，在这篇文章中我们将介绍如何使用HTML5的GEOLOCATION，JQUERY和YAHOOAPI来开发一个天气预报WEB应用。如果你不熟悉HTML5的GEOLOCATION（地理位置服务），请参考我们的HTML5教程HTML5GEOLOCATION。首先你需要得到YAHOOAPI的APIKEY，你可以通过如下地址取得对应的APIKEYHTTPS//DEVELOPERAPPSYAHOOCOM/DASHBOARD/CREATEKEYHTML以上创建过程中会要求你输入相关应用地址等信息。创建成功后，你可以得到APPID。主要思路在这个教程中，我们主要思路如下1使用GEOLOCATION取得用户的地理位置信息2然后，使用YAHOO的PLACEFINDERAPI，来通过经纬度来找到具体地点，例如，城市或者国家。HTTP//MINGWAN128CN其中包括了WOEID，这个用来在天气预报应用中找到国家3最后，我们将调用YAHOO的WEATHERAPI来取得天气WEB应用代码HTMLWEATHERFORECASTWITHJQUERYYAHOOAPISHTTP//WWWQQQ81COMWEATHERFORECASTPREVIOUSNEXTTUTORIALWEATHERFORECASTWITHJQUERYYAHOOAPISHEADONTOTUTORIALZINETODOWNLOADTHISEXAMPLEJAVASCRIPTFUNCTION{/CONFIGURATION/VARAPPIDFA2PT26K//YOURYAHOOAPPIDVARDEGC//CFORCELSIUS,FFORFAHRENHEIT//MAPPINGTHEWEATHERCODESRETURNEDBYYAHOOSAPI//TOTHECORRECTICONSINTHEIMG/ICONSFOLDERVARWEATHERICONMAPSTORM,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,LIGHTNINGVARWEATHERDIVWEATHER,SCROLLERSCROLLER,LOCATIONPLOCATION//DOESTHISBROWSERSUPPORTGEOLOCATIONIFNAVIGATORGEOLOCATION{NAVIGATORGEOLOCATIONGETCURRENTPOSITIONLOCATIONSUCCESS,LOCATIONERROR}ELSE{SHOWERROR“YOURBROWSERDOESNOTSUPPORTGEOLOCATION“}//GETUSERSLOCATION,ANDUSEYAHOOSPLACEFINDERAPI//TOGETTHELOCATIONNAME,WOEIDANDWEATHERFORECASTFUNCTIONLOCATIONSUCCESSPOSITION{VARLATPOSITIONCOORDSLATITUDEVARLONPOSITIONCOORDSLONGITUDE//YAHOOSPLACEFINDERAPIHTTP//DEVELOPERYAHOOCOM/GEO/PLACEFINDER///WEAREPASSINGTHERGFLAGFORREVERSEGEOCODINGCOORDINATESTOPLACENAMEVARGEOAPIHTTP//WHEREYAHOOAPISCOM/GEOCODELOCATIONLAT,LON//INGTHEQUERYFORYAHOOSWEATHERFORECASTINGAPIWITHYQL//HTTP//DEVELOPERYAHOOCOM/WEATHER/VARWSQLSELECTFROMWEATHERFORECASTWHEREWOEIDWIDANDU“DEG“,WEATHERYQLHTTP//QUERYYAHOOAPISCOM/V1/PUBLIC/YQLQENCODEURICOMPONENTWSQLIFWINDOWCONSOLE}//ISSUEACROSSDOMAINAJAXREQUESTCORSTOTHEGEOSERVICE//NOTSUPPORTEDINOPERAANDIEGETJSONGEOAPI,FUNCTIONR{IFRRESULTSETFOUND1{RESULTSRRESULTSETRESULTSCITYRESULTS0CITYCODERESULTS0STATECODE||RESULTS0COUNTRYCODE//THISISTHECITYIDENTIFIERFORTHEWEATHERAPIWOEIDRESULTS0WOEID//MAKEAWEATHERAPIREQUESTGETJSONWEATHERYQLREPLACEWID,WOEID,FUNCTIONR{IFRQUERYIFITEM{SHOWERROR“WECANTFINDWEATHERINATIONABOUTYOURCITY“IFWINDOWCONSOLEWOEIDD“,CITY,CODE,WOEID}RETURNFALSE}ADDWEATHERITEMCODE,“NOW“,ITEMTEXTITEMTEMPDEGFORVARI0IITEMDATEREPLACE\D,,ITEMTEXTITEMLOWDEG/ITEMHIGHDEG}//ADDTHELOCATIONTOTHEPAGELOCATIONHTMLCITY,CODEWEATHERDIVADDCLASSLOADED//SETTHESLIDERTOTHEFIRSTSLIDESHOWSLIDE0}ELSE{SHOWERROR“ERRORRETRIEVINGWEATHERDATA“}}}}ERRORFUNCTION{SHOWERROR“YOURBROWSERDOESNOTSUPPORTCORSREQUESTS“}}FUNCTIONADDWEATHERCODE,DAY