iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
2
Modern Web

我的網站、您的手機、它的Cordova、誰的第三方系列 第 25

{"24":"Yahoo Weather&Geolocation"}

使用SimpleWeather,可以取得的天氣資訊有非常多。因為,它的資料來源,也是Yahoo Weather。

正好,Visual Studio 2015官方網站,在介紹Cordova的網頁部份,有一頁「Get Started with Visual Studio Tools for Apache Cordova
https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/
http://ithelp.ithome.com.tw/upload/images/20161224/200061322B20eDkZZz.png

這一頁裡面介紹的範例,也是在Cordova 環境下,使用Weather功能,這個網頁裡面的Weather功能,是微軟在自己的Github裡所提供的,也可參考。https://github.com/Microsoft/cordova-samples/tree/master/weather-app

http://ithelp.ithome.com.tw/upload/images/20161224/20006132qBQCWzacY9.png

還記得之前示範過的Cordova Geolocation Plugin,我們可以透過這個Plugin 取得目前所在的經緯度。所以現在要將將SimpleWeather 和 Geolocation做個結合,結合之後,我們就可以取得目前,智慧型手機,所在位置的天氣,如下圖。

http://ithelp.ithome.com.tw/upload/images/20161224/20006132vgDq57ABG8.png

我的JS碼如下:
(function () {
    "use strict";
    document.addEventListener('deviceready', onDeviceReady, false);
    function onDeviceReady() {
        var getoptions = { timeout: 30000 };
       //這一段是在取得經緯度
        navigator.geolocation.getCurrentPosition(getSuccess, getError, getoptions);
    };
    var getSuccess = function (getposition) {
       //將取得經緯度之,帶入loadWeather
        loadWeather(getposition.coords.latitude + ',' + getposition.coords.longitude);
    };
    function loadWeather(location, woeid) {
        var cont;
        $.simpleWeather({
            location: location,//經緯度座標
            woeid: woeid,//woeid,是Yahoo Weather裡很重要的一個參數,類似台灣的郵遞區號,Yahoo用自己的方式,將全世界的城市都做了一個編號,統稱為WOEID
            //因為我們是用經緯度判斷目前的所在地,因此woeid可以不用輸入。
            unit: 'c',//要顯示的是攝式
            success: function (weather) {
                cont = '<h3><i class="icon-' + weather.code + '"></i>您所在地的氣溫 ' + weather.temp + '&deg;' + weather.units.temp + '</h3>';
                cont += '<ul><li>您所在的城市<br/>' + weather.city + ', ' + weather.region + '</li><br/>';
                cont += '<li class="currently">您所在的天氣狀況<br/>' + weather.currently + '</li></ul><br/>';
                cont += '<img src="' + weather.image + '"/><hr/>';//天氣狀況的圖示
                $("#weather").html(cont);
            },
            error: function (error) {
                $("#weather").html('<p>' + error + '</p>');
            }
        });
    }
    function getError(error) {
        alert('get_error: ' + error.code + '\n' +
              'message: ' + error.message + '\n');
    }
    function watchError(error) {
        alert('watch_error: ' + error.code + '\n' +
              'message: ' + error.message + '\n');
    }

以上,就是在取得天氣資訊的示範,供大家參考。

(待)

2016/12/24 Sunallen


上一篇
{"23":"Yahoo Weather"}
下一篇
{"25":"-Xmx512M&CSP"}
系列文
我的網站、您的手機、它的Cordova、誰的第三方32

尚未有邦友留言

立即登入留言