html5指南-4.使用Geolocation實(shí)現(xiàn)定位功能

2020-03-24 17:43:59

字體：大中小

供稿：網(wǎng)友

今天我們要學(xué)習(xí)的是使用Geolocation實(shí)現(xiàn)定位功能。我們可以通過navigator.geolocation獲取Geolocation對象，他提供了下列方法：
getCurrentPosition(callback,errorCallback,options)：獲取當(dāng)前位置；
watchPosition(callback,error,options)：開始監(jiān)控當(dāng)前位置；
clearWatch(id)：停止監(jiān)控當(dāng)前位置。
note：下面例子使用的瀏覽器是chrome，使用其他瀏覽器我不能保證運(yùn)行結(jié)果和例子顯示的結(jié)果一致。
1.獲取當(dāng)前位置
我們將使用getCurrentPosition方法獲取當(dāng)前位置，位置信息不會以結(jié)果的形式直接返回，我們需要使用callback函數(shù)進(jìn)行處理。在獲取坐標(biāo)的過程中會有些延遲，還會問你要訪問權(quán)限。我們來看下面的例子：

復(fù)制代碼代碼如下:
!DOCTYPE HTML
html
head
title Example /title
style
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
/style
/head
body
table border="1"
tr
th Longitude: /th
td id="longitude" - /td
th Latitude: /th
td id="latitude" - /td
/tr
tr
th Altitude: /th
td id="altitude" - /td
th Accuracy: /th
td id="accuracy" - /td
/tr
tr
th Altitude Accuracy: /th
td id="altitudeAccuracy" - /td
th Heading: /th
td id="heading" - /td
/tr
tr
th Speed: /th
td id="speed" - /td
th Time Stamp: /th
td id="timestamp" - /td
/tr
/table
script
navigator.geolocation.getCurrentPosition(displayPosition);
function displayPosition(pos) {
var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed'];
for (var i = 0, len = properties.length; i len; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById('timestamp').innerHTML = pos.timestamp;
}
/script
/body
/html

返回的position對象包含兩個屬性，coords：返回坐標(biāo)信息；timestamp：獲取坐標(biāo)信息的時間。其中coords又包括下面屬性：latitude：緯度；longitude：經(jīng)度；altitude：高度；accuracy：精確度（米）；altitudeAccuracy：高度精確度（米）；heading：行進(jìn)方向；speed：行進(jìn)速度（米/秒）。
并不是所有的信息都會返回，這取決于你承載瀏覽器的設(shè)備。像有GPS、加速器、羅盤的移動設(shè)備會返回大部分信息，家用電腦就不行了。家用電腦獲取的位置信息，取決于所處的網(wǎng)絡(luò)環(huán)境或者是wifi。下面我們看上例的運(yùn)行結(jié)果。

點(diǎn)擊允許，獲取坐標(biāo)信息。
2.處理異常
現(xiàn)在我們介紹getCurrentPosition的異常處理，他是通過使用errorCallback回調(diào)函數(shù)實(shí)現(xiàn)的。函數(shù)返回的參數(shù)error包含兩個屬性，code：錯誤類型的代碼；message：錯誤信息。code包含三個值：1：用戶沒有授權(quán)使用geolocation；2：無法獲取坐標(biāo)信息；3：獲取信息超時。
下面我們看個例子：

復(fù)制代碼代碼如下:
!DOCTYPE HTML
html
head
title Example /title
style
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
/style
/head
body
table border="1"
tr
th Longitude: /th
td id="longitude" - /td
th Latitude: /th
td id="latitude" - /td
/tr
tr
th Altitude: /th
td id="altitude" - /td
th Accuracy: /th
td id="accuracy" - /td
/tr
tr
th Altitude Accuracy: /th
td id="altitudeAccuracy" - /td
th Heading: /th
td id="heading" - /td
/tr
tr
th Speed: /th
td id="speed" - /td
th Time Stamp: /th
td id="timestamp" - /td
/tr
tr
th Error Code: /th
td id="errcode" - /td
th Error Message: /th
td id="errmessage" - /td
/tr
/table
script
navigator.geolocation.getCurrentPosition(displayPosition, handleError);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
/script
/body
/html

拒絕授權(quán)，運(yùn)行結(jié)果：
3.使用geolocation可選參數(shù)項(xiàng)
getCurrentPosition(callback,errorCallback,options)中的options有如下參數(shù)可以使用，enableHighAccuracy：使用最好的效果；timeout：超時時間（毫秒）；maximumAge：指定緩存時間（毫秒）。我們來下下面的例子：

復(fù)制代碼代碼如下:
!DOCTYPE HTML
html
head
title Example /title
style
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
/style
/head
body
table border="1"
tr
th Longitude: /th
td id="longitude" - /td
th Latitude: /th
td id="latitude" - /td
/tr
tr
th Altitude: /th
td id="altitude" - /td
th Accuracy: /th
td id="accuracy" - /td
/tr
tr
th Altitude Accuracy: /th
td id="altitudeAccuracy" - /td
th Heading: /th
td id="heading" - /td
/tr
tr
th Speed: /th
td id="speed" - /td
th Time Stamp: /th
td id="timestamp" - /td
/tr
tr
th Error Code: /th
td id="errcode" - /td
th Error Message: /th
td id="errmessage" - /td
/tr
/table
script
var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
navigator.geolocation.getCurrentPosition(displayPosition, handleError, options);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
/script
/body
/html

4.監(jiān)視位置變化
下面我們介紹使用watchPosition方法實(shí)現(xiàn)位置變化的監(jiān)視，他的使用方法和getCurrentPosition一樣。我們來看例子：

復(fù)制代碼代碼如下:
!DOCTYPE HTML
html
head
title Example /title
style
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
/style
/head
body
table border="1"
tr
th Longitude: /th
td id="longitude" - /td
th Latitude: /th
td id="latitude" - /td
/tr
tr
th Altitude: /th
td id="altitude" - /td
th Accuracy: /th
td id="accuracy" - /td
/tr
tr
th Altitude Accuracy: /th
td id="altitudeAccuracy" - /td
th Heading: /th
td id="heading" - /td
/tr
tr
th Speed: /th
td id="speed" - /td
th Time Stamp: /th
td id="timestamp" - /td
/tr
tr
th Error Code: /th
td id="errcode" - /td
th Error Message: /th
td id="errmessage" - /td
/tr
/table
button id="pressme" Cancel Watch /button
script
var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options);
document.getElementById("pressme").onclick = function (e) {
navigator.geolocation.clearWatch(watchID);
};
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
/script
/body
/html

當(dāng)點(diǎn)擊Cancel Watch按鈕時，停止監(jiān)視。
demo下載地址：Html5Guide.Geolocation.ziphtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML5本地存儲之Web Storage詳解

下一篇：Html5上傳圖片移動端、PC端通用代碼