使用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/VARAPPID FA2PT26K //YOURYAHOOAPPIDVARDEG C //CFORCELSIUS,FFORFAHRENHEIT//MAPPINGTHEWEATHERCODESRETURNEDBYYAHOO SAPI//TOTHECORRECTICONSINTHEIMG/ICONSFOLDERVARWEATHERICONMAP 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 VARWEATHERDIV WEATHER ,SCROLLER SCROLLER ,LOCATION PLOCATION //DOESTHISBROWSERSUPPORTGEOLOCATIONIFNAVIGATORGEOLOCATION{NAVIGATORGEOLOCATIONGETCURRENTPOSITIONLOCATIONSUCCESS,LOCATIONERROR}ELSE{SHOWERROR“YOURBROWSERDOESNOTSUPPORTGEOLOCATION“}//GETUSER SLOCATION,ANDUSEYAHOO SPLACEFINDERAPI//TOGETTHELOCATIONNAME,WOEIDANDWEATHERFORECASTFUNCTIONLOCATIONSUCCESSPOSITION{VARLATPOSITIONCOORDSLATITUDEVARLONPOSITIONCOORDSLONGITUDE//YAHOO SPLACEFINDERAPIHTTP//DEVELOPERYAHOOCOM/GEO/PLACEFINDER///WEAREPASSINGTHERGFLAGFORREVERSEGEOCODINGCOORDINATESTOPLACENAMEVARGEOAPI HTTP//WHEREYAHOOAPISCOM/GEOCODELOCATION LAT , LON //INGTHEQUERYFORYAHOO SWEATHERFORECASTINGAPIWITHYQL//HTTP//DEVELOPERYAHOOCOM/WEATHER/VARWSQL SELECTFROMWEATHERFORECASTWHEREWOEIDWIDANDU“ DEG “ ,WEATHERYQL HTTP//QUERYYAHOOAPISCOM/V1/PUBLIC/YQLQ ENCODEURICOMPONENTWSQL IFWINDOWCONSOLE}//ISSUEACROSSDOMAINAJAXREQUESTCORSTOTHEGEOSERVICE//NOTSUPPORTEDINOPERAANDIEGETJSONGEOAPI,FUNCTIONR{IFRRESULTSETFOUND1{RESULTSRRESULTSETRESULTSCITYRESULTS0CITYCODERESULTS0STATECODE||RESULTS0COUNTRYCODE//THISISTHECITYIDENTIFIERFORTHEWEATHERAPIWOEIDRESULTS0WOEID//MAKEAWEATHERAPIREQUESTGETJSONWEATHERYQLREPLACE WID ,WOEID,FUNCTIONR{IFRQUERYIFITEM{SHOWERROR“WECAN TFINDWEATHERINATIONABOUTYOURCITY“IFWINDOWCONSOLEWOEIDD“,CITY,CODE,WOEID}RETURNFALSE}ADDWEATHERITEMCODE,“NOW“,ITEMTEXT ITEMTEMP ° DEG FORVARI0I ITEMDATEREPLACE \D , ,ITEMTEXT ITEMLOW ° DEG / ITEMHIGH ° DEG }//ADDTHELOCATIONTOTHEPAGELOCATIONHTMLCITY , CODE WEATHERDIVADDCLASS LOADED //SETTHESLIDERTOTHEFIRSTSLIDESHOWSLIDE0}ELSE{SHOWERROR“ERRORRETRIEVINGWEATHERDATA“}}}}ERRORFUNCTION{SHOWERROR“YOURBROWSERDOESNOTSUPPORTCORSREQUESTS“}}FUNCTIONADDWEATHERCODE,DAY