HTML5获取定位

798 阅读1分钟

通过H5的方式获取用户位置信息,目前我们项目中在不依赖第三方提供的获取gps方法实现的,总结项目中使用该方法存在的弊端和问题。

具体业务中存的问题总结如下:

  1. 如果一不小心点了下"不允许"之后,会发现,下次进到这个h5之后再也不会提示请求定位权限的提示框了。
  2. "不允许"被缓存了下来。再次调用geolocation会报 error.PERMISSION_DENIED 错误
  3. 只能通过在系统中就行清理缓存的才能解决。

清除缓存的方法:

  • (设置)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>