您现在的位置： 万盛学电脑网 >> 程序编程 >> 网络编程 >> 编程语言综合 >> 正文
使用jQuery和HTML5等开发一个天气预报web应用
作者：佚名 责任编辑：admin 更新时间：2022-06-22
今天我们介绍来自tutorialzine的一个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应用代码
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>Weather Forecast with jQuery & Yahoo APIs</title>
<!-- The stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Google Fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Playball|Open+Sans+Condensed:300,700" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></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 with jQuery & Yahoo APIs</h2>
<a class="tzine" href="http://tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/">Head on to <i>Tutorial<b>zine</b></i> to download this example</a>
</footer>
<!-- JavaScript includes - jQuery, turn.js and our own script.js -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/script.js" charset="utf-8"></script>
</body>
</html>
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 Yahoo's 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 user's location, and use Yahoo's PlaceFinder API
// to get the location name, woeid and weather forecast
function locationSuccess(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
// Yahoo's PlaceFinder API http://developer.yahoo.com/geo/placefinder/
// We are passing the R gflag for reverse geocoding (coordinates to place name)
var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=
- 上一个程序编程： VB.NET如何得到调用当前过程的方法名称和类名
- 下一个程序编程： 程序员：90%做维护 10%做开发 这正常吗？
