jQ、Yahoo API和HTML 5开发天气预报应用

在线演示本地下载

创新互联公司-专业网站定制、快速模板网站建设、高性价比凤阳网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式凤阳网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖凤阳地区。费用合理售后完善，十余年实体公司更值得信赖。

今天我们介绍来自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应用代码

#p#

HTML

 
 
 
   
  
  
     
  
  
     
  
  
         
  
  
             
  
  
          Weather Forecast with jQuery & Yahoo APIs   
  
  
              
  
  
             
  
  
             
  
  
              
  
  
             
  
  
             
  
  
              
  
  
             
  
  
         
  
  
          
  
  
         
  
  
     
  
  
             
  
  
              Weather Forecast
   
  
  
             
  
  
              
  
  
             
  
  
     
  
  
                 
  
  
                     
  
  
                 
  
  
                  
  
  
              Previous   
  
  
              Next

Tutorial: Weather Forecast with jQuery & Yahoo APIs

Head on to Tutorialzine to download this example

#p#

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 + ' '+item.temp+'°'+DEG+'');    
  
  
                              
  
  
                          for (var i=0;i<2;i++){    
  
  
                              item = r.query.results.channel.item.forecast[i];    
  
  
                              addWeather(    
  
  
                                  item.code,     
  
  
                                  item.day +' '+item.date.replace('\d+$','')+'',    
  
  
                                  item.text + ' '+item.low+'°'+DEG+' / '+item.high+'°'+DEG+''   
  
  
                              );    
  
  
                          }    
  
  
                              
  
  
                          // Add the location to the page    
  
  
                          location.html(city+', '+code+'');    
  
  
                              
  
  
                          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 = '
'+    
  
  
              ''+    
  
  
              ' '+ day +'
 '+ condition +    
  
  
              '';    
  
  
              
  
  
          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应用！

本文标题：jQ、Yahoo API和HTML 5开发天气预报应用
文章URL：http://www.shufengxianlan.com/qtweb/news25/222225.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联