自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

jQ、Yahoo API和HTML 5開發(fā)天氣預(yù)報應(yīng)用

作者：gbin1
開發(fā) 前端
使用Geolocation取得用戶的地理位置信息，然后，使用yahoo的 PlaceFinder API，來通過經(jīng)緯度來找到具體地點，例如，城市或者國家。其中包括了woeid，這個用來在天氣預(yù)報應(yīng)用中找到國家。

使用jQuery，Yahoo API和HTML5的geolocation來開發(fā)一個天氣預(yù)報web應(yīng)用

在線演示  本地下載

今天我們介紹來自tutorialzine的一個HTML5/jQuery/Yahoo API的開發(fā)教程，在這篇文章中我們將介紹如何使用HTML5的Geolocation，jQuery和YahooAPI來開發(fā)一個天氣預(yù)報web應(yīng)用。 如果你不熟悉HTML5的Geolocation（地理位置服務(wù)），請參考我們的HTML5教程： HTML5 Geolocation。

首先你需要得到Y(jié)ahoo API的API key，你可以通過如下地址取得對應(yīng)的API key：https://developer.apps.yahoo.com/dashboard/createKey.html

以上創(chuàng)建過程中會要求你輸入相關(guān)應(yīng)用地址等信息。創(chuàng)建成功后，你可以得到APPID。

主要思路

在這個教程中，我們主要思路如下：

使用Geolocation取得用戶的地理位置信息

然后，使用yahoo的 PlaceFinder API，來通過經(jīng)緯度來找到具體地點，例如，城市或者國家。其中包括了woeid，這個用來在天氣預(yù)報應(yīng)用中找到國家。

最后，我們將調(diào)用yahoo的Weather API來取得天氣。

web應(yīng)用代碼

#p#

HTML

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="gbk" /> 
  5.         <title>Weather Forecast with jQuery &amp; Yahoo APIs</title> 
  6.           
  7.         <!-- The stylesheet --> 
  8.         <link rel="stylesheet" href="assets/css/styles.css" /> 
  9.           
  10.         <!-- Google Fonts --> 
  11.         <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Playball|Open+Sans+Condensed:300,700" /> 
  12.           
  13.         <!--[if lt IE 9]> 
  14.           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
  15.         <![endif]--> 
  16.     </head> 
  17.       
  18.     <body> 
  19.  
  20.         <header> 
  21.             <h1>Weather Forecast</h1> 
  22.         </header> 
  23.           
  24.         <div id="weather"> 
  25.  
  26.             <ul id="scroller"> 
  27.                 <!-- The forecast items will go here --> 
  28.             </ul> 
  29.               
  30.             <a href="#" class="arrow previous">Previous</a> 
  31.             <a href="#" class="arrow next">Next</a> 
  32.               
  33.         </div> 
  34.           
  35.         <p class="location"></p> 
  36.           
  37.         <div id="clouds"></div> 
  38.           
  39.         <footer> 
  40.             <h2><i>Tutorial:</i> Weather Forecast with jQuery &amp; Yahoo APIs</h2> 
  41.             <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> 
  42.         </footer> 
  43.           
  44.         <!-- JavaScript includes - jQuery, turn.js and our own script.js --> 
  45.         <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
  46.         <script src="assets/js/script.js" charset="utf-8"></script> 
  47.           
  48.     </body> 
  49. </html> 

#p#

Javascript

  1. $(function(){  
  2.       
  3.     /* Configuration */ 
  4.       
  5.     var APPID = 'fa2pT26k';        // Your Yahoo APP id  
  6.     var DEG = 'c';        // c for celsius, f for fahrenheit  
  7.       
  8.     // Mapping the weather codes returned by Yahoo's API  
  9.     // to the correct icons in the img/icons folder  
  10.       
  11.     var weatherIconMap = [  
  12.         'storm', 'storm', 'storm', 'lightning', 'lightning', 'snow', 'hail', 'hail',  
  13.         'drizzle', 'drizzle', 'rain', 'rain', 'rain', 'snow', 'snow', 'snow', 'snow',  
  14.         'hail', 'hail', 'fog', 'fog', 'fog', 'fog', 'wind', 'wind', 'snowflake',  
  15.         'cloud', 'cloud_moon', 'cloud_sun', 'cloud_moon', 'cloud_sun', 'moon', 'sun',  
  16.         'moon', 'sun', 'hail', 'sun', 'lightning', 'lightning', 'lightning', 'rain',  
  17.         'snowflake', 'snowflake', 'snowflake', 'cloud', 'rain', 'snow', 'lightning' 
  18.     ];  
  19.       
  20.     var weatherDiv = $('#weather'),  
  21.         scroller = $('#scroller'),  
  22.         location = $('p.location');  
  23.       
  24.     // Does this browser support geolocation?  
  25.     if (navigator.geolocation) {  
  26.         navigator.geolocation.getCurrentPosition(locationSuccess, locationError);  
  27.     }  
  28.     else{  
  29.         showError("Your browser does not support Geolocation!");  
  30.     }  
  31.       
  32.     // Get user's location, and use Yahoo's PlaceFinder API  
  33.     // to get the location name, woeid and weather forecast  
  34.       
  35.     function locationSuccess(position) {  
  36.         var lat = position.coords.latitude;  
  37.         var lon = position.coords.longitude;  
  38.  
  39.         // Yahoo's PlaceFinder API http://developer.yahoo.com/geo/placefinder/  
  40.         // We are passing the R gflag for reverse geocoding (coordinates to place name)  
  41.         var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=J&gflags=R&appid='+APPID;  
  42.           
  43.         // Forming the query for Yahoo's weather forecasting API with YQL  
  44.         // http://developer.yahoo.com/weather/  
  45.           
  46.         var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',  
  47.             weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',  
  48.             code, city, results, woeid;  
  49.           
  50.         if (window.console && window.console.info){  
  51.             console.info("Coordinates: %f %f", lat, lon);  
  52.         }  
  53.           
  54.         // Issue a cross-domain AJAX request (CORS) to the GEO service.  
  55.         // Not supported in Opera and IE.  
  56.         $.getJSON(geoAPI, function(r){  
  57.              
  58.             if(r.ResultSet.Found == 1){  
  59.                   
  60.                 results = r.ResultSet.Results;  
  61.                 city = results[0].city;  
  62.                 code = results[0].statecode || results[0].countrycode;  
  63.           
  64.                 // This is the city identifier for the weather API  
  65.                 woeid = results[0].woeid;  
  66.       
  67.                 // Make a weather API request:  
  68.                 $.getJSON(weatherYQL.replace('WID',woeid), function(r){  
  69.                       
  70.                     if(r.query && r.query.count == 1){  
  71.                           
  72.                         // Create the weather items in the #scroller UL  
  73.                           
  74.                         var item = r.query.results.channel.item.condition;  
  75.                           
  76.                         if(!item){  
  77.                             showError("We can't find weather information about your city!");  
  78.                             if (window.console && window.console.info){  
  79.                                 console.info("%s, %s; woeid: %d", city, code, woeid);  
  80.                             }  
  81.                               
  82.                             return false;  
  83.                         }  
  84.                           
  85.                         addWeather(item.code, "Now", item.text + ' <b>'+item.temp+'°'+DEG+'</b>');  
  86.                           
  87.                         for (var i=0;i<2;i++){  
  88.                             item = r.query.results.channel.item.forecast[i];  
  89.                             addWeather(  
  90.                                 item.code,   
  91.                                 item.day +' <b>'+item.date.replace('\d+$','')+'</b>',  
  92.                                 item.text + ' <b>'+item.low+'°'+DEG+' / '+item.high+'°'+DEG+'</b>' 
  93.                             );  
  94.                         }  
  95.                           
  96.                         // Add the location to the page  
  97.                         location.html(city+', <b>'+code+'</b>');  
  98.                           
  99.                         weatherDiv.addClass('loaded');  
  100.                           
  101.                         // Set the slider to the first slide  
  102.                         showSlide(0);  
  103.                      
  104.                     }  
  105.                     else {  
  106.                         showError("Error retrieving weather data!");  
  107.                     }  
  108.                 });  
  109.           
  110.             }  
  111.               
  112.         }).error(function(){  
  113.             showError("Your browser does not support CORS requests!");  
  114.         });  
  115.          
  116.     }  
  117.       
  118.     function addWeather(code, day, condition){  
  119.           
  120.         var markup = '<li>'+  
  121.             '<img src="assets/img/icons/'+ weatherIconMap[code] +'.png" />'+  
  122.             ' <p class="day">'+ day +'</p> <p class="cond">'+ condition +  
  123.             '</p></li>';  
  124.           
  125.         scroller.append(markup);  
  126.     }  
  127.       
  128.     /* Handling the previous / next arrows */ 
  129.       
  130.     var currentSlide = 0;  
  131.     weatherDiv.find('a.previous').click(function(e){  
  132.         e.preventDefault();  
  133.         showSlide(currentSlide-1);  
  134.     });  
  135.       
  136.     weatherDiv.find('a.next').click(function(e){  
  137.         e.preventDefault();  
  138.         showSlide(currentSlide+1);  
  139.     });  
  140.       
  141.       
  142.     function showSlide(i){  
  143.         var items = scroller.find('li');  
  144.           
  145.         if (i >= items.length || i < 0 || scroller.is(':animated')){  
  146.             return false;  
  147.         }  
  148.           
  149.         weatherDiv.removeClass('first last');  
  150.           
  151.         if(i == 0){  
  152.             weatherDiv.addClass('first');  
  153.         }  
  154.         else if (i == items.length-1){  
  155.             weatherDiv.addClass('last');  
  156.         }  
  157.           
  158.         scroller.animate({left:(-i*100)+'%'}, function(){  
  159.             currentSlide = i;  
  160.         });  
  161.     }  
  162.       
  163.     /* Error handling functions */ 
  164.       
  165.     function locationError(error){  
  166.         switch(error.code) {  
  167.             case error.TIMEOUT:  
  168.                 showError("A timeout occured! Please try again!");  
  169.                 break;  
  170.             case error.POSITION_UNAVAILABLE:  
  171.                 showError('We can\'t detect your location. Sorry!');  
  172.                 break;  
  173.             case error.PERMISSION_DENIED:  
  174.                 showError('Please allow geolocation access for this to work.');  
  175.                 break;  
  176.             case error.UNKNOWN_ERROR:  
  177.                 showError('An unknown error occured!');  
  178.                 break;  
  179.         }  
  180.           
  181.     }  
  182.       
  183.     function showError(msg){  
  184.         weatherDiv.addClass('error').html(msg);  
  185.     }  
  186.  
  187. }); 

搞定！具體演示請參考在線Demo，希望大家喜歡這個web應(yīng)用！

 

原文鏈接：http://www.cnblogs.com/gbin1/archive/2012/06/14/2549525.html

【編輯推薦】

  1. jQuery 煙花效果（運動相關(guān)）
  2. 到處都是jQuery選擇器的年代
  3. jQuery:讓文盲秀網(wǎng)頁
  4. 新版jQuery div彈出層的ajax登錄
  5. jQuery圖片延遲加載技術(shù)的應(yīng)用
責(zé)任編輯：張偉 來源： gbin1的博客
jQuery
相關(guān)推薦

2016-03-14 10:29:38

天氣預(yù)報各類工具源碼

2013-03-26 13:20:27

Android天氣預(yù)報

2009-07-07 09:25:08

Linux開發(fā)FOSS開發(fā)項目

2022-02-21 11:02:54

5G通信網(wǎng)絡(luò)天氣預(yù)報

2013-04-10 17:59:50

微信公眾平臺接口開發(fā)

2017-08-01 10:10:32

人工智能智能天氣預(yù)報

2010-08-13 10:56:58

FlexWebservice

2013-09-09 10:52:10

2012-03-13 16:45:09

超級計算機沃森Deep Thunde

2018-01-29 11:25:37

LinuxASCII 字符天氣預(yù)報

2020-02-11 20:00:29

開源開源工具天氣預(yù)報

2009-12-02 15:45:04

PHP抓取天氣預(yù)報

2012-07-16 13:36:54

交換機數(shù)據(jù)中心核心交換機氣象衛(wèi)星

2020-01-16 15:13:40

AI預(yù)測天氣預(yù)報

2009-04-17 17:11:18

ASP.NET新浪天氣

2015-10-19 17:16:10

天氣預(yù)報命令行Linux

2009-08-26 16:59:44

Web Service

2023-10-27 16:15:35

鴻蒙天氣服務(wù)功能

2019-10-25 19:42:41

華為

2022-02-21 15:07:48

氣象學(xué)人工智能AI
點贊
收藏

51CTO技術(shù)棧公眾號