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 | 响应的日期/时间 |
原文地址:https://www.cnblogs.com/ODevil/p/12569347.html
时间: 2024-11-09 01:38:57