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以及一些套殼瀏覽器接入的定位服務在國外，有較大的限制，也會造成定位失敗，且失敗率較高，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/3983.html
標籤：HTML5
上一篇：jQuery 事件