首頁  >  文章  >  web前端  >  html5指南-4.使用Geolocation實現定位功能_html5教學技巧

html5指南-4.使用Geolocation實現定位功能_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:50:181510瀏覽

今天我們要學習的是使用Geolocation來實現定位功能。我們可以透過navigator.geolocation取得Geolocation對象,他提供了下列方法:
getCurrentPosition(callback,errorCallback,options):取得目前位置;
watchPosition(callback,error,options):開始監控目前位置;
clearWatch(id):停止監控目前位置。
note:下面範例使用的瀏覽器是chrome,使用其他瀏覽器我不能保證執行結果和範例顯示的結果一致。
1.取得目前位置
我們將使用getCurrentPosition方法取得目前位置,位置資訊不會以結果的形式直接傳回,我們需要使用callback函數進行處理。在取得座標的過程中會有些延遲,也會問你要存取權限。我們來看下面的例子:

複製代碼
代碼如下:




Example



























Longitude: - Lat​​itude: -
Altitude: - td>
Accuracy: -
Altitude Accuracy: - Heading: -
Speed: - Time Stamp: -

<script> <br />navigator.geolocation.getCurrentPosition(displayPosition ); <br />function displayPosition(pos) { <br />var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed']; <br /> for (var i = 0, len = properties.length; i < len; i ) { <br />var value = pos.coords[properties[i]]; <br />document.getElementById(properties[i]).innerHTML = value; <br />} <br />document.getElementById('timestamp').innerHTML = pos.timestamp; <br />} <br /></script>



傳回的position物件包含兩個屬性,coords:傳迴座標資訊;timestamp:取得座標資訊的時間。其中coords又包含下面屬性:latitude:緯度;longitude:經度;altitude:高度;accuracy:精確度(公尺);altitudeAccuracy:高度精確度(公尺);heading:行進方向;speed:行進速度(公尺/秒) 。
並不是所有的資訊都會返回,這取決於你承載瀏覽器的設備。像是有GPS、加速器、羅盤的行動裝置會回傳大部分訊息,家用電腦就不行了。家用電腦獲取的位置信息,取決於所處的網絡環境或者是wifi。下面我們來看上例的運行結果。


點選允許,取得座標資訊。

2.處理異常
現在我們介紹getCurrentPosition的異常處理,他是透過使用errorCallback回呼函數來實現的。函數傳回的參數error包含兩個屬性,code:錯誤類型的代碼;message:錯誤訊息。 code包含三個值:1:使用者沒有授權使用geolocation;2:無法取得座標資訊;3:取得資訊逾時。
下面我們要看一個例子:

複製程式碼
程式碼如下:

;


範例標題>

表格{邊框折疊:折疊;}
第,td{填充:4px;}
第{文字對齊:右;}
;
頭>



第:第>
-
緯度:
-


海拔高度:
-
準確度:
-


海拔高度精確度:
-
標題:
-


第:第>
- td>
第 時間戳:
-


錯誤代碼:
-
錯誤訊息:第>
-

表格>

navigator.geolocation.getCurrentPosition(displayPosition,handleError);
function displayPosition(pos(pos)(pos)> properties = ["經度", "緯度", "高度", "精度", "高度精確度", "航向", "速度"];
for (var i = 0; i var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp") .innerHTML = pos.timestamp;
}
函數handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage"). innerHTML = err.message;
}
腳本>
身體>


拒絕授權,運行結果:

3.使用geolocation可選參數項目 getCurrentPosition(callback,errorCallback,options)中的選項有以下參數可以使用,enableHighAccuracy:使用最好的效果;超時:超時時間(毫秒); maxAge:指定儲存時間(毫秒)。我們來下下面的例子:


複製程式碼程式碼如下:

;


範例標題>

表格{邊框折疊:折疊;}
第,td{填充:4px;}
第{文字對齊:右;}
;
頭>



第:第>
-
緯度:
-


海拔高度:
-
準確度:
-


海拔高度精確度:
-
標題:
-


第:第>
- td>
第 時間戳:
-


錯誤代碼:
-
錯誤訊息:第>
-

表>

var options = {
enableHighAccuracy: false,
逾時: 2000,
maximumAge
};
navigator.geolocation.getCurrentPosition(displayPosition,handleError,options);
function displayPosition(pos) {
var properties = ["經度", "緯度", "高度", ","精準度", "高度精準度", "航向", "速度"];
for (var i = 0; i var value = pos.coords[properties[i] ];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
}
函數函數(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
腳本>
身體>

4.監視位置變化

介紹我們使用watchPosition方法實現監視的位置變化,他的使用方法和getCurrentPosition一樣。我們看範例:
複製程式碼
程式碼如下:

;


範例標題>

表格{邊框折疊:折疊;}
第,td{填充:4px;}
第{文字對齊:右;}
;
頭>



第:第>
-
緯度:
-


海拔高度:
-
準確度:
-


海拔高度精確度:
-
標題:
-


第:第>
- td>
第 時間戳:
-


錯誤代碼:
-
錯誤訊息:第>
-

表>


var options = {
enableHighAccuracy: false,
逾時: 2000,
maximumAge: 30000
};
var watchID = navigator.geolocation.watchPosition(displayPosget, optionler. ").onclick = function (e) {
navigator.geolocation.clearWatch(watchID);
};
function displayPosition(pos) {
var properties = ["經度", "緯度Position(pos) {
var properties = ["經度", "緯度" , "高度", "精度", "高度精確度", "航向", "速度"];
for (var i = 0; i var value = pos. coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp ; }
函數handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
腳本>
身體>



點擊取消觀看按鈕時,停止監視。
示範下載位址:
Html5Guide.Geolocation.zip
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn