萬盛學電腦網 >> 網絡編程 >> 編程語言綜合 >> 使用jQuery和HTML5等開發一個天氣預報web應用
使用jQuery和HTML5等開發一個天氣預報web應用
今天我們介紹來自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=
編程語言綜合排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved