知识点
相关文章
更多最近更新
更多使用jQuery、Yahoo API和HTML5的geolocation来开发一个天气预报web应用
2019-03-02 23:51|来源: 网路
今天我们介绍来自tutorialzine的一个HTML5/jQuery/Yahoo API的开发教程,在这篇文章中我们将介绍如何使用HTML5的Geolocation,jQuery和YahooAPI来开发一个天气预报web应用。 如果你不熟悉HTML5的Geolocation(地理位置服务),请参考我们的HTML5教程: HTML5 Geolocation。
首先你需要得到Yahoo API的API key,你可以通过如下地址取得对应的API key:
https://developer.apps.yahoo.com/dashboard/createKey.html
以上创建过程中会要求你输入相关应用地址等信息。创建成功后,你可以得到APPID。
主要思路
在这个教程中,我们主要思路如下:
- 使用Geolocation取得用户的地理位置信息
- 然后,使用yahoo的 PlaceFinder API,来通过经纬度来找到具体地点,例如,城市或者国家。其中包括了woeid,这个用来在天气预报应用中找到国家
- 最后,我们将调用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=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应用!
转自:http://www.cnblogs.com/gbin1/archive/2012/06/14/2549525
相关问答
更多-
java模拟天气预报[2021-10-24]
建一个 web 项目 将axis1.4 包放在 lib 下 调去天气网的webservice 接口 ,就可以获取当前某个城市的天气了 -
未记录的Yahoo!(Undocumented Yahoo! Weather API?)[2023-10-06]
api文档说 : 注意:旧的位置参数“p”已被弃用,并将在未来版本中删除。 因此,鼓励用户迁移到'w'参数,该参数提供了与Y的深入集成! GeoPlanet。 旧的文档在这里存档。 所以:使用p似乎并不是我生产代码的最佳主意。 the api documentation says: Note: The old location parameter 'p' has been deprecated and will be removed in the future releases. Hence users a ... -
Java:Yahoo联系API(Java:Yahoo contacts API)[2023-03-19]
没有客户端库。 您可以通过两个步骤检索联系人: 步骤1: 使用OAuth1获取用户的'TOKEN'和'TOKEN SECRET'。 有些图书馆是抄写员和路标 。 第2步: 检索这些令牌后,您必须获取用户的yahoo id。 示例:(我正在使用路标) OAuthConsumer consumer = new DefaultOAuthConsumer('YOUR CLIENT ID', 'YOUR CLIENT SECRET'); URL url = new URL("http://social ... -
x<-c('AAIT', 'AAL', 'AAME') kk<-lapply(x,function(i) download.file(paste0("http://ichart.finance.yahoo.com/table.csv?s=",i),paste0(i,".csv"))) 如果你想直接读取文件: jj<- lapply(x,function(i) read.csv(paste0("http://ichart.finance.yahoo.com/table.csv?s=",i))) x<-c( ...
-
使用雅虎天气Api(Using yahoo weather Api)[2022-05-12]
它最终会是这样的: public interface WeatherService { @GET("v1/public/yql") CallgetWeather(@Query("q") String query); } 然后像这样创建对象: Retrofit retrofit = new Retrofit.Builder() .baseUrl("https://query.yahooapis.com") .addConvert ... -
如果可用,请在$.ajax调用中使用jsonpCallback参数,如: jsonpCallback: "cbfunc", 它的描述,从jQuery API文档中读取: 指定jsonp请求的回调函数名称。 这个值将被用来代替jQuery自动生成的随机名称。 文档后来继续说: 最好让jQuery生成一个唯一的名称,因为它可以更容易地管理请求并提供回调和错误处理。 当您希望启用更好的浏览器缓存GET请求时,您可能需要指定回调。 但是,在使用YQL时不建议使用这种“优先”的行为。 正是为什么这种方法不理想可能 ...
-
我找到了解决方案虽然有一点开销。 步骤如下:1>在您自己的服务器中创建一个PHP脚本(比如命名为YRedirect.php)。 2>将以下代码包括在内 - 3>使用YOUR_APP_ID_OR_BUNDLE_ID在info.plist文件中添加URL方案。 就是这样,你完 ...
-
Yahoo Contact API(Yahoo Contact API)[2022-03-11]
而不是getContacts(),您可以使用yql查询: $session = YahooSession::requireSession(OAUTH_CONSUMER_KEY, OAUTH_CONSUMER_SECRET, OAUTH_APP_ID); $query = sprintf("select * from social.contacts where guid=me;"); $response = $session->query($query); /**** printing the ... -
使用他们在这里提供的Web测试平台,您可以测试不同的YQL查询。 YQL是一种类似SQL的语言,它支持OR和IN等OR符。 我对你的问题的测试是这样的: select * from weather.forecast where woeid in (select woeid from geo.places(1) where text in ("nome, ak", "chicago, il", "dallas, tx")) 这为3个城市带来了天气预报。 Using the web test platform ...
-
YQL天气预报(YQL Weather Forecast)[2022-07-17]
我在这里发布了一个完整的示例 - https://gist.github.com/mvark/5231461 有关API的更多详细信息,请查看Yahoo Weather API文档 I have posted a complete sample here - https://gist.github.com/mvark/5231461 Check the Yahoo Weather API documentation for more details about the API