<ruby id="bjlp5"><noframes id="bjlp5"><del id="bjlp5"></del><dfn id="bjlp5"></dfn>

<font id="bjlp5"></font><mark id="bjlp5"><big id="bjlp5"></big></mark>

    <listing id="bjlp5"><ruby id="bjlp5"></ruby></listing>

    <mark id="bjlp5"><thead id="bjlp5"><mark id="bjlp5"></mark></thead></mark>

    成都網站建設,原新盒子網絡工作室
    專業設計,打造專業品質
    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.fadedz.com/  QQ:357898628 snjeso@qq.com
    2011 sosbox.cn , All Right Reserved 蜀ICP備09022060號
    Share
    更多
    收縮
    • 電話咨詢

    • 4000-855-316
    • 028-85555316
    • 15608036768
    秋霞二级理论,小说区 图片区 综合区,欧美国产日韩a在线视频y,亚洲欧美AV中文日韩二区试看