文档介绍：使用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/
以上创建过程中会要求你输入相关应用地址等信息。创建成功后,你可以得到APPID。
主要思路
在这个教程中,我们主要思路如下:
使用Geolocation取得用户的地理位置信息
然后,使用yahoo的 PlaceFinder API,来通过经纬度来找到具体地点,例如,城市或者国家。http://ming. 其中包括了woeid,这个用来在天气预报应用中找到国家
最后,我们将调用yahoo的Weather API来取得天气
web应用代码
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>Weather Forecast with jQuery &amp; Yahoo APIs</title>
<!-- The stylesheet -->
<link rel="stylesheet" href="assets/css/" />
<!-- Google Fonts -->
<link rel="stylesheet" href="http://fonts./css?family=Playball|Open+Sans+Condensed:300,700" />
<!--[if lt IE 9]>
<script src="http://html5shiv./svn/trunk/"></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 w