从零开始的HTML5之旅（六）
HTML5地理定位
HTML5 Geolocation（地理定位）用于定位用户的位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
浏览器支持
IE9、Firefox、Chrome、Safari以及Opera支持地理定位。对于拥有GPS的设备，定位将更加准确。
地理定位
用getCurrentPosition()方法获得用户的位置。
getCurrentPosition(successCallback, errorCallback,PositionOptions);
``getCurrentPosition()方法内包含了三个对象，分别是successCallback对象、errorCallback对象、PositionOptions`对象。
successCallback对象
successCallback对象表示获取到的用户数据位置。此对象包含了coords和timestamp两个属性。
coords属性
| 值 | 描述 |
|---|---|
| accuracy | 精确度 |
| latitude | 纬度 |
| longitude | 经度 |
| altitude | 海拔 |
| altitudeAcuracy | 海拔高度的精确度 |
| heading | 朝向 |
| speed | 速度 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1">此处显示坐标</p>
<button onclick="getLocation()">获取坐标</button>
</body>
</html>
<script>
var d1 = document.getElementById("demo1");
function getLocation() {
//检测是否支持地理定位
if (navigator.geolocation) {
/*
运行getCurrentPosition()方法。如果运行成功，
则向参数showPosition中规定的函数返回一个coordinates对象
*/
navigator.geolocation.getCurrentPosition(showPosition);
} else {
d1.innerHTML = "无法获取您的位置";
}
}
function showPosition(position) {
/*
通过coordinates对象获取到latitude属性和longitude属性
*/
d1.innerHTML = "维度：" + position.coords.latitude + "<br />" + "经度：" + position.coords.longitude;
}
</script>
errorCallback对象
errorCallback对象表示返回的错误代码。对象中包含了message属性和code属性。
code属性
| 值 | 描述 |
|---|---|
| unknow_error | 表示不包括在其他错误代码中的错误，可以在message中查找信息。 |
| permission_denied | 表示用户拒绝浏览器获取位置信息的请求。 |
| position unavalablf | 表示网络不可用或者连接不到卫星。 |
| timeout | 表示获取超时时。必须在options中指定了timeout值时才有可能发生这种错误。 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1">此处显示坐标</p>
<button onclick="getLocation()">获取坐标</button>
</body>
</html>
<script>
var d1 = document.getElementById("demo1");
function getLocation() {
//检测是否支持地理定位
if (navigator.geolocation) {
/*
运行getCurrentPosition()方法。如果运行成功，
则向参数showPosition中规定的函数返回一个coordinates对象
运行getCurrentPosition()方法的第二个参数用于处理错误，
它规定了获取用户位置失败时运行的函数
在getCurrentPosition()方法运行成功后会向showError函数返回一个errorCallback对象。
errorCallback对象表示返回的错误代码
*/
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
d1.innerHTML = "无法获取您的位置";
}
}
function showPosition(position) {
/*
通过coordinates对象获取到latitude属性和longitude属性
*/
d1.innerHTML = "维度：" + position.coords.latitude + "<br />" + "经度：" + position.coords.longitude;
}
function showError(error) {
/*
error.code获取errorCallback对象中的code属性。
code属性中有四个值，如下
*/
switch (error.code) {
case error.PERMISSION_DENIED: //用户不允许定位
d1.innerHTML = "用户拒绝了地理位置定位请求。";
break;
case error.POSITION_UNAVAILABLE: //无法获取当前位置
d1.innerHTML = "位置信息不可用。";
break;
case error.TIMEOUT: //超时
d1.innerHTML = "获取用户位置的请求超时。";
break;
case error.UNKNOWN_ERROR: //未知错误
d1.innerHTML = "出现未知错误。";
break;
}
}
</script>
PositionOptions属性
PositionOptions接口不继承任何属性。数据格式为json，有3个属性。
| 属性 | 描述 |
|---|---|
| enableHighAcuracy | 布尔值，表示是否启用高精确度模式，如果启用这个模式，浏览器在获取位置信息时可能需要耗费更多的时间。 |
| Timeout | 整数，表示浏览器需要在指定的时间内获取位置信息，否则触发errorCallback。 |
| maximumAge | 整数/常量，表示浏览器重新获取位置信息的时间间隔。 |
getCurrentPosition()方法
若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
watchPosition()方法
Geolocation.watchPosition()方法用于注册监听器，在设备的地理位置发生改变的时候自动被调用。也可以选择特定的错误处理函数。
该方法会返回一个ID，如果取消监听可以通过Geolocation.clearWatch()传入该ID实现取消的目的。
语法
id = navigator.geolocation.watchPosition(success[, error[, options]])
参数
| 参数 | 描述 |
|---|---|
| success | 成功时候的回调函数， 同时传入一个 Position对象当作参数。 |
| error | 失败时候的回调函数，可选， 会传入一个 PositionError对象当作参数。 |
| options | 一个可选的 PositionOptions对象。 |
