通过H5的方式获取用户位置信息,目前我们项目中在不依赖第三方提供的获取gps方法实现的,总结项目中使用该方法存在的弊端和问题。
具体业务中存的问题总结如下:
- 如果一不小心点了下"不允许"之后,会发现,下次进到这个h5之后再也不会提示请求定位权限的提示框了。
- "不允许"被缓存了下来。再次调用geolocation会报 error.PERMISSION_DENIED 错误
- 只能通过在系统中就行清理缓存的才能解决。
清除缓存的方法:
- (设置)Settings -> (通用)Genera -> (重置) Reset-> (重置定位于隐私)Reset Location & Privacy.
- (设置)Settings ->( 隐私)Privacy 开启 Location Services.
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5获取定位</title>
</head>
<body>
<p id="demo">请允许获得您的坐标</p>
<script type="text/javascript">
/*
HTML5获取用户位置信息存在问题: 无解
开始请求定位时,会弹出授权提示框,提示是否"允许"定位,允许定位继续下一步
如果一不小心点了下"不允许"之后,会发现,下次进到这个h5之后再也不会提示请求定位权限的提示框了。
"不允许"被缓存了下来。再次调用geolocation会报 error.PERMISSION_DENIED 错误
需要在系统中就行清理缓存的设置:
(设置)Settings -> (通用)Genera -> (重置) Reset-> (重置定位于隐私)Reset Location & Privacy.
(设置)Settings ->( 隐私)Privacy 开启 Location Services.
重新进入页面即可提示用户权限提示了!
*/
window.onload=function() {
const demo = document.getElementById("demo");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
/*
position 根据实际设备的不同,其中某些属性返回空值
position.timestamp 获取位置时的时间戳
position.coords
accuracy 精度
altitude 高度
altitudeAccuracy 高精度
heading 前进的方向
latitude 纬度
longitude 经度
speed 速度
*/
console.log(position, '返回position');
demo.innerHTML="Latitude:" + position.coords.latitude + ";Longitude:" + position.coords.longitude;
}, error => {
console.log(error, '返回error');
switch (error.code) {
case error.PERMISSION_DENIED:
demo.innerHTML="用户拒绝了地理定位请求"
break;
case error.POSITION_UNAVAILABLE:
demo.innerHTML="位置信息不可用"
break;
case error.TIMEOUT:
demo.innerHTML="获取用户位置的请求超时"
break;
case error.UNKNOWN_ERROR:
demo.innerHTML="未知错误"
break;
}
}, {
timeout: 30 * 1000, // 设置请求超时时间,如果在该时间内未获取到地理位置信息,则返回错误
maximumAge: 5000, // 设置浏览器缓存时间
enableHighAccuracy: false // true尽可能高的准确性,请求时间会更长
});
} else{
demo.innerHTML="浏览器不支持";
}
/* watchPosition 用于注册监听器,在设备的地理位置发生改变的时候自动被调用 */
const id = navigator.geolocation.watchPosition(position => {
console.log(position, 1)
})
// clearWatch stop watching after 10 seconds
setTimeout(() => {
navigator.geolocation.clearWatch(id)
}, 10 * 1000)
}
</script>
</body>
</html>