iT邦幫忙

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

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

{"8":"not igo,gc&neo, Is GEO(end) "}

Geolocation,由W3C制定,而我們經常性的在使用這個功能...其中一個就是「Pokemo go !」白話文是,當我們的智慧型手機打開GPS功能後,我們就可透過Cordova Geolocation Plugin 取得我們目前所在的經緯度。如果不打開GPS功能,還能取得目前的經緯度嗎?

如果只是透過Cordova Geolocation Plugin這個功能,是無法取得的。

那可不可以寫網頁,呼叫這樣的功能? 沒問題,也可以! 只是目前我們是透過Cordova 去呼叫,所以還是先用Cordova 做介紹囉。

之前提過,Geolocation有下列這些屬性,

屬性 功能
latitude 緯度
longitude 經度
altitude 高度
accuracy 位置誤差
altitudeAccuracy 高度誤差
heading 移動方向
speed 移動速度(pokemon go...)

另外,Geolocation 有三個Event...分別是,getCurrentPosition、watchPosition和clearWatch 這三種,

getCurrentPoisition 如字面意思,取得目前的位置
watchPoisition ,則是持續取得裝置的經緯度...
clearPoisition,則是負責停止watchPoisition。

使用方法如下:
navigator.geolocation.getCurrentPosition(successCallback, errorCallback ,options)
options有三種屬性
屬性|介紹

enableHighAccuracy|是否要取得高度精確的位置資訊
maximumAge|保存上一次的經緯度資訊,預設為0,保存期間單位為毫秒
timeout|逾時的時間值,單位毫秒。在未開啟GPS功能或無法取得經緯度的情況下,會回傳錯誤

如果根據測試範例,可發現,getCurrentPoisition的區段數值,是靜止不動的,而watchPoisition的區段數值,則是不斷跳動。
http://ithelp..com.tw/upload/images/20161208/20006132i1VT778fAV.png

http://ithelp..com.tw/upload/images/20161208/20006132tvW0DXuf5f.png
可至Google Play 下載此次範例,Google Play 搜尋 2016iT邦幫忙鐵人賽_範例

html

 <div id="show_getPosition"></div>
<hr />
<div id="show_watchPosition"></div>
js

(function () {
    "use strict";
    var watchID = null;
    var getID = null;
    document.addEventListener('deviceready', onDeviceReady, false);
 
    function onDeviceReady() {

        var getoptions = { timeout: 30000 }; 
        getID = navigator.geolocation.getCurrentPosition(getSuccess, getError, getoptions);//此區段為getCurrentPoisition
        var watchoptions = { enableHighAccuracy: true, timeout: 10000 };
        watchID = navigator.geolocation.watchPosition(watchSuccess, watchError, watchoptions);//此區段為watchPoisition
    };
  
    var getSuccess = function (getposition) {//此區段為getCurrentPoisition
        var element1 = document.getElementById('show_getPosition');
        element1.innerHTML = "這是getPosition資訊<br />" +
              "緯度 " + getposition.coords.latitude + "<br />" +
              "經度(度)" + getposition.coords.longitude + "<br />" +
              "高度(度)" + getposition.coords.altitude + "<br />" +
              "位置誤差(公尺) " + getposition.coords.accuracy + "<br />" +
              "高度誤差((公尺)" + getposition.coords.altitudeAccuracy + "<br />" +
              "移動方向(度)" + getposition.coords.heading + "<br />" +
        "移動速度(公尺/秒)" + getposition.coords.speed + "<br />" +
              "取得位置資訊的時間 " + getposition.timestamp ;
    };
    var watchSuccess = function (watchposition) {//此區段為watchPoisition
        var element2 = document.getElementById('show_watchPosition');
        var llat = watchposition.coords.latitude;
        var llon = watchposition.coords.longitude;
        element2.innerHTML = "這是watchPosition資訊<br />" +
               "緯度 " + watchposition.coords.latitude + "<br />" +
              "經度(度)" + watchposition.coords.longitude + "<br />" +
              "高度(度)" + watchposition.coords.altitude + "<br />" +
              "位置誤差(公尺) " + watchposition.coords.accuracy + "<br />" +
              "高度誤差((公尺)" + watchposition.coords.altitudeAccuracy + "<br />" +
              "移動方向(度)" + watchposition.coords.heading + "<br />" +
        "移動速度(公尺/秒)" + watchposition.coords.speed + "<br />" +
              "取得位置資訊的時間 " + watchposition.timestamp;
      //  initMap(llat, llon);
    };
    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/08 Sunallen


上一篇
{"7":"not igo,gc&neo, Is GEO(start) "}
下一篇
{"9":"GEO&Google API Key"}
系列文
我的網站、您的手機、它的Cordova、誰的第三方32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言