HTML5 Geolocation 定位用戶的位置 HTML5 Geolocation API 用於獲得用戶的地理位置。 鑒於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。 註意: Geolocation（地理定位）對於擁有 GPS 的設備，比如 iPhone，地理定位更加精確 ...
HTML5 Geolocation
定位用戶的位置
HTML5 Geolocation API 用於獲得用戶的地理位置。
鑒於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。
註意: Geolocation（地理定位）對於擁有 GPS 的設備，比如 iPhone，地理定位更加精確。
geography 地理； location 位置; Geo+location 地理位置； current 現在；
getCurrentPosition() 方法 - 返回數據
T若成功，則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會返回其他下麵的屬性。
| 屬性 | 描述 |
|---|---|
| coords.latitude | 十進位數的緯度 |
| coords.longitude | 十進位數的經度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米計 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，從正北開始以度計 |
| coords.speed | 速度，以米/每秒計 |
| timestamp | 響應的日期/時間 |
HTML5 - 使用地理定位
請使用 getCurrentPosition() 方法來獲得用戶的位置。
下例是一個簡單的地理定位實例，可返回用戶位置的經度和緯度:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geolocation</title>
</head>
<body>
<button onclick="getLocation()">點擊獲取地理位置</button>
<p>數據信息：</p>
<p id="demo"></p>
<script>
var x=document.getElementById("demo");
function getLocation()
{
//檢測是否支持地理定位
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(updatPos,errorLoca);
}
else
{
x.innerHTML="該瀏覽器不支持獲取地理位置。";
}
}
//處理數據並顯示
function updatPos(position){
var latitude = position.coords.latitude;//十進位單位
var longitude = position.coords.longitude;//十進位單位
var accuracy = position.coords.accuracy;//以m為單位制定緯度和經度與實際位置的差距
var timestamp = position.timestamp;//時間戳
var date = new Date(timestamp);//時間格式
console.log('經度坐標' + latitude.toFixed(2)); //保留兩位小數
console.log('緯度坐標' + longitude.toFixed(2));
console.log('準確度' + accuracy);
console.log('獲取位置數據的時間' + date);
x.innerHTML = "緯度: " + latitude.toFixed(2) + "<br>經度: " + longitude.toFixed(2);
}
function errorLoca(error){
var str = "";
switch(error.code){
case 0:
str ='位置信息獲取失敗，失敗原因'+error.message;break;
case 1://錯誤編碼 PERMISSION_DENIED
str ='用戶拒絕共用其位置信息';break;
case 2://錯誤編碼 POSITION_UNAVAILABLE
str = '嘗試獲取用戶位置數據，但失敗了' ;break;
case 3://錯誤編碼 TIMEOUT
str = '嘗試獲取用戶的位置數據超時' ;break;
}
console.log(str);
console.warn('ERROR(' + error.code + '): ' + error.message);
x.innerHTML = str;
}
</script>
</body>
</html>
實例解析:
- 檢測是否支持地理定位
- 如果支持，則運行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。
- 如果getCurrentPosition()運行成功，則向參數updatPos中規定的函數返回一個position參數
- 如果getCurrentPosition()運行失敗，則向參數errorLoca中規定的函數返回一個error參數
- updatPos() 函數獲得並顯示經度和緯度
- errorLoca() 函數提示錯誤信息
Geolocation 對象 - 其他有趣的方法
watchPosition() - 返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
下麵的例子展示 watchPosition() 方法。您需要一臺精確的 GPS 設備來測試該例（比如 iPhone）：
實例
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else
{
x.innerHTML="該瀏覽器不支持獲取地理位置。";
}
}
function updatPos(position)
{
x.innerHTML="緯度: " + position.coords.latitude +
"<br>經度: " + position.coords.longitude;
}
遇到問題以及解決方案
本機運行代碼時，預設啟動Chrome瀏覽器，每次點擊獲取地理位置按鈕時，反應很慢需要等待許久。
得到報錯如下圖：
通過查閱資料瞭解到失敗的幾種原因。
Chrome控制台提示的錯誤：Network location provider at 'https://www.googleapis.com/' : No response received.
Chrome瀏覽器接入的定位服務在國外，有較大的限制，也會造成定位失敗，且失敗率較高。
換成系統自帶的IE瀏覽器，完美運行
再嘗試使用火狐瀏覽器運行，也成功定位
定位出現失敗的原因
1. 第一種情況
瀏覽器不支持原生定位介面，如IE較低版本的瀏覽器，message欄位包含Browser not Support html5 geolocation信息。
2. 第二種情況
用戶禁用了定位許可權，需要用戶開啟定位許可權，message欄位包含Geolocation permission denied。
3. 第三種情況
瀏覽器禁止了非安全域的定位請求，比如Chrome、IOS10已經陸續禁止，需要升級站點到HTTPS，message欄位包含Geolocation permission denied信息。**註意:**Chrome不會禁止localhost功能變數名稱HTTP協議下的定位。
4. 第四種情況
瀏覽器定位超時，包括原生的超時，可以適當增加超時屬性的設定值以減少這一現象。某個別瀏覽器本身對定位介面的友好程度較弱，也會超時返回失敗，message欄位包含Geolocation time out信息。
5. 第五種情況
Chrome、Firefox以及一些套殼瀏覽器接入的定位服務在國外，有較大的限制，也會造成定位失敗，且失敗率較高。
