Geolocation API
HTML5 中，window.navigator 對象新增了一個 geolocation 屬性，可以使用 Geolocation API 對該屬性進行訪問。
地理位置 API 允許用戶向 Web 應用程序提供他們的位置。出于隱私考慮，報告地理位置會先請求用戶許可。
取得當前地理位置
異步請求獲取用戶位置，并查詢定位硬件來獲取最新信息。
- 語法：
/**
* @param onSuccess：必選，獲取當前地理位置信息成功時執行的回調函數
* @param onError：可選，獲取當前地理位置信息失敗時執行的回調函數
* @param options：可選，可選屬性列表
*/
void getCurrentPosition(onSuccess, onError, options);
- 使用方法：
navigator.geolocation.getCurrentPosition(function(position)) {
// 獲取成功時的處理
}, function(error) {
// 獲取失敗時的處理
}, {
// 設置可選屬性
}
- 注意事項：
默認情況下，getCurrentPosition() 會盡快返回一個低精度結果，這在開發人員不關心精確度，只關心快速獲取結果的情況下很有用。有 GPS 的設備可能需要一分鐘或更久來獲取 GPS 定位，在這種情況下 getCurrentPosition() 會返回低精度數據（基于 IP 的定位或 Wi-Fi 定位）。
position 對象：
- 來源：獲取地理位置信息成功，則可以在獲取成功后的回調函數中獲得 position 對象。
- 屬性：
- latitude：當前地理位置的緯度。
- longitude：當前地理位置的經度。
- altitude：當前地理位置的海拔高度（不能獲取時為 null）。
- accuracy：獲取到的緯度或經度的精度（以米為單位）。
- heading：設備的前進方向。用面朝正北方向的順時針旋轉角度來表示（不能獲取時為 null）。
- speed：設備的前進速度（以米/秒為單位，不能獲取時為 null）。
- timestamp：獲取地理位置信息時的時間。
error 對象：
- 來源：獲取地理位置信息失敗，則可以在獲取失敗后的回調函數中或的 error 對象。
- 注意：當在瀏覽器中打開使用了 Geolocation API 來獲得用戶當前位置信息的頁面時，瀏覽器會詢問用戶是否共享位置信息，如果用戶在該頁面中拒絕共享，也會引起錯誤的產生。
- 屬性：
- code：
- 1：用戶拒絕了位置服務；
- 2：獲取不到位置信息；
- 3：獲取信息超時錯誤。
- message：字符串，在該字符串中包含錯誤信息。
- code：
- 示例：
navigator.geolocation.getCurrentPosition(
function(position) {
// 成功時執行的操作
},
// 捕獲錯誤信息
function(error) {
var errorTypes = {
1 : '位置服務被拒絕',
2 : '獲取不到位置信息',
3 : '獲取信息超時'
};
alert(errorTypes[error.code] + ": 不能確定你的當前地理位置。");
}
};
可選屬性列表：
- enableHighAccuracy：是否要求高精度的地理位置信息，這個參數在很多設備上設置了都沒用，因為使用在設備上時需要結合設備電量、具體地理情況來綜合考慮。因此，多數情況下把該屬性設為默認，由設備自身來調整。
- timeout：對地理位置信息的獲取操作做一個超時限制（單位為毫秒）。如果在該時間內未獲取到地理位置信息，則返回錯誤。
- maximumAge：對地理位置信息進行緩存的有效時間（單位為毫秒）。例如 maximumAge: 120000。如果 10 點整的時候獲取過一次地理位置信息，10：01 的時候，再次調用 navigator.geolocation.getCurrentPosition 重新獲取地理位置信息，則返回的依然為 10：00 時的數據（因為設置的緩存有效時間為 2 分鐘）。超過這個時間后緩存的地理位置信息被廢棄，嘗試重新獲取地理位置信息。如果該值被指定為 0，則無條件重新獲取新的地理位置信息。
getCurrentPosition() 示例：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>獲取當前位置的地理信息示例</title>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
<script>
function showObject(obj, k) {
// 遞歸顯示 object
if(!obj) {
return;
}
for(var i in obj) {
if(typeof(obj[i) != 'object' || obj[i] == null) {
for(var j = 0; j < k; j++) {
document.write(" ");
}
document.write(i + " : " + obj[i] + "<br/>");
} else {
document.write(i + " : " + "<br/>");
showObject(obj[i], k + 1);
}
}
}
function get_location() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(show_map, handle_error, {
enableHighAccuracy : true,
maximumAge : 1000
})
} else {
alert("你的瀏覽器不支持使用 HTML 5 獲取地理位置信息。");
}
}
function handle_error(err) {
// 錯誤處理
switch(err.code) {
case 1 :
alert("位置服務被拒絕。");
break;
case 2 :
alert("暫時獲取不到位置信息。");
break;
case 3 :
alert("獲取信息超時。");
break;
default :
alert("未知錯誤。");
break;
}
}
function show_map(position) {
// 顯示地理信息
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
showObject(position, 0);
}
get_location();
</script>
</body>
</html>
持續監視當前地理位置的信息
使用 watchPosition 方法來持續獲取用戶的當前地理位置信息,它會定期自動獲取。
- 語法：
/**
* 參數和 getCurrentPosition 方法的參數說明與使用方法相同。
* @return int 返回一個 ID，唯一地標記該位置監視器，作為 clearWatch() 的參數來停止監視用戶位置。
*/
int watchPosition(onSuccess, onError, options);
- 注意事項：可以直接調用 watchPosition() 函數，不需要先調用 getCurrentPosition() 函數。
停止獲取當前用戶的地理位置信息
使用該方法可以停止對當前用戶的地理位置信息的監視。
/**
* @param watchId watchPosition() 返回的整數值
*/
void clearWatch(watchId);
瀏覽器兼容情況：
瀏覽器兼容情況
