成都網站建設,原新盒子網絡工作室
專業設計,打造專業品質
Professional design, to create professional quality
HTML5開發的一個天氣預報網頁應用
來源: 作者:成都網站制作 日期:2012-06-14 20:19:41 點擊:0

使用jQuery,Yahoo API和HTML5的geolocation來開發一個天氣預報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 &amp; 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 &amp; 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=J&gflags=R&appid='+APPID;
// Forming the query for Yahoo's weather forecasting API with YQL
// http://developer.yahoo.com/weather/
var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',
weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',
code, city, results, woeid;
if (window.console && window.console.info){
console.info("Coordinates: %f %f", lat, lon);
}
// Issue a cross-domain AJAX request (CORS) to the GEO service.
// Not supported in Opera and IE.
$.getJSON(geoAPI, function(r){
if(r.ResultSet.Found == 1){
results = r.ResultSet.Results;
city = results[0].city;
code = results[0].statecode || results[0].countrycode;
// This is the city identifier for the weather API
woeid = results[0].woeid;
// Make a weather API request:
$.getJSON(weatherYQL.replace('WID',woeid), function(r){

if(r.query && r.query.count == 1){
// Create the weather items in the #scroller UL
var item = r.query.results.channel.item.condition;
if(!item){
showError("We can't find weather information about your city!");
if (window.console && window.console.info){
console.info("%s, %s; woeid: %d", city, code, woeid);
}
return false;
}
addWeather(item.code, "Now", item.text + ' <b>'+item.temp+'°'+DEG+'</b>');
for (var i=0;i<2;i++){
item = r.query.results.channel.item.forecast[i];
addWeather(
item.code,
item.day +' <b>'+item.date.replace('\d+$','')+'</b>',
item.text + ' <b>'+item.low+'°'+DEG+' / '+item.high+'°'+DEG+'</b>'
);
}
// Add the location to the page
location.html(city+', <b>'+code+'</b>');

weatherDiv.addClass('loaded');

// Set the slider to the first slide
showSlide(0);
}
else {
showError("Error retrieving weather data!");
}
});
}
}).error(function(){
showError("Your browser does not support CORS requests!");
});
}
function addWeather(code, day, condition){

var markup = '<li>'+
'<img src="assets/img/icons/'+ weatherIconMap[code] +'.png" />'+
' <p class="day">'+ day +'</p> <p class="cond">'+ condition +
'</p></li>';

scroller.append(markup);
}
/* Handling the previous / next arrows */

var currentSlide = 0;
weatherDiv.find('a.previous').click(function(e){
e.preventDefault();
showSlide(currentSlide-1);
});
weatherDiv.find('a.next').click(function(e){
e.preventDefault();
showSlide(currentSlide+1);
});
function showSlide(i){
var items = scroller.find('li');

if (i >= items.length || i < 0 || scroller.is(':animated')){
return false;
}
weatherDiv.removeClass('first last');

if(i == 0){
weatherDiv.addClass('first');
}
else if (i == items.length-1){
weatherDiv.addClass('last');
}
scroller.animate({left:(-i*100)+'%'}, function(){
currentSlide = i;
});
}
/* Error handling functions */

function locationError(error){
switch(error.code) {
case error.TIMEOUT:
showError("A timeout occured! Please try again!");
break;
case error.POSITION_UNAVAILABLE:
showError('We can\'t detect your location. Sorry!');
break;
case error.PERMISSION_DENIED:
showError('Please allow geolocation access for this to work.');
break;
case error.UNKNOWN_ERROR:
showError('An unknown error occured!');
break;
}
}
function showError(msg){
weatherDiv.addClass('error').html(msg);
}
});

搞定!具體演示請參考在線Demo,希望大家喜歡這個web應用!

Address
咨詢熱線:028-85555316 and 15378179975
地址:成都市青羊區北大街19號正成·財富領地1棟2901(省市政務中心斜對面)
電話:028-85555316 15378179975
網址:http://www.dqagky.tw/  QQ:357898628 [email protected]
2011 sosbox.cn , All Right Reserved 蜀ICP備09022060號
Share
更多
收縮
  • 電話咨詢

  • 4000-855-316
  • 028-85555316
  • 15608036768
彩客网比分