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);
浏览器兼容情况：
浏览器兼容情况
