美文网首页
前端获取用户位置信息

前端获取用户位置信息

作者: guangyan24 | 来源:发表于2021-08-15 19:03 被阅读0次

    前言

    获取key准备工作参考链接:https://lbs.amap.com/api/javascript-api/guide/abc/prepare

    浏览器定位

    地图初始化加载的定位只能获取到城市级别信息,如果想获取到具体的位置就要借助浏览器定位。高德JS API提供了AMap.Geolocation插件来实现定位,使用方式如下:

    <!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>Document</title>
    </head>
    <body>
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=your key"></script> 
        <script type="text/javascript">
            AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                // 是否使用高精度定位,默认:true
                enableHighAccuracy: true,
                // 设置定位超时时间,默认:无穷大
                timeout: 10000,
                // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                zoomToAccuracy: true,     
                //  定位按钮的排放位置,  RB表示右下
                buttonPosition: 'RB'
            })
    
            geolocation.getCurrentPosition(function(status,result){
                if(status=='complete'){
                    onComplete(result)
                }else{
                    onError(result)
                }
            });
    
            function onComplete (data) {
                // data是具体的定位信息
                console.log('onComplete',data);
            }
    
            function onError (data) {
                // 定位出错
                console.log('onError',data);
            }
            })
        </script>
    </body>
    </html>
    

    高德JS API提供的浏览器定位接口,融合了HTML5 Geolocation定位接口、精确IP定位服务,以及安卓定位sdk定位。

    定位失败或者遇到其它问题

    1.Geolocation定位失败的原因是什么?

    JS-API的Geolocation定位插件,融合了HTML5 Geolocation定位接口、精确IP定位服务,以及安卓定位sdk定位。其中与安卓定位sdk的结合使用适用于开发安卓系统的H5应用,需同时使用安卓定位sdk和JS-API。

    2.Geolocation.getCurrentPosition获取精确位置的流程是什么样的?

    (1)在PC端,因为原生接口成功率很低,JS-API会优先调用精确IP定位服务,在IP定位失败的时候,尝试使用浏览器原生定位接口进行定位,如果原生定位接口也定位失败,则返回error事件或回调error信息。定位成功之后我们会对浏览器定位的经纬度结果进行向高德坐标的转化,并对所有有效定位结果融合地址信息后返回complete事件或者回调complete信息。

    (2)在移动端,如果开发者开启了sdk辅助定位,那么安卓手机上我们会优先尝试调用sdk的定位接口,失败之后优先调用浏览器原生定位接口进行定位,浏览器定位失败之后尝试进行精确IP定位,如果以上三种定位全部尝试失败则返回error事件或回调error信息,否则和PC端的一样,定位成功之后进行高德坐标转化和地址融合。

    (3)我们在定位的回调或者事件响应中返回了message字段,message字段明确指出了每一步的成功和失败原因。

    3.如果没有拿到message如何获取定位失败错误信息?

    可以通过如下方法获取定位失败信息,之后根据定位错误信息参考

    //可以拷贝如下代码,使用alert输出定位失败信息
    //解析定位错误信息
    functiononError(data) {
    alert(JSON.stringify(data));
    document.getElementById('tip').innerHTML = '定位失败';
    }
    
    4.getCurrentPosition返回的message原因解析:

    (1)Get ipLocation failed:IP精确定位失败,精确IP定位服务目前无法完全覆盖所有用户IP,失败率在5%左右;

    (2)sdk定位失败:请检查sdk的key是否设置好,以及webview的定位权限及应用和系统的定位权限是否开启。

    (3)浏览器定位失败,有多种情况:

     1)Browser not Support html5 geolocation:浏览器不支持原生定位接口,如IE较低版本的浏览器等;   
    
     2)Geolocation permission denied:用户禁用了定位权限,需要用户开启设备和浏览器的定位权限,并在浏览器弹窗中点击“允许使用定位”选项。   
    
     3)Geolocation permission denied:浏览器禁止了非安全域的定位请求,比如Chrome、IOS10已陆续禁止,这时候需要升级站点到HTTPS。注意Chrome不会禁止localhost等域名HTTP协议下的定位。
    
      4)Geolocation permission denied:Access to geolocation was blocked over secure connection with mixed content,也就是在Https的页面中引用的http的资源。
    
     5)Get geolocation time out:浏览器定位超时,包括原生的超时,可以适当增加超时属性的设定值以减少这一现象,另外还有个别浏览器(如google Chrome浏览器等)本身的定位接口是黑洞,通过其请求定位完全没有回应,也会超时返回失败。
    
     6)Get geolocation failed:定位失败,Chrome、火狐以及部分套壳浏览器接入的定位服务在国外,有较大限制,失败率高。
    

    注释:如果定位到城市即可满足需求,建议大家改用Geolocation.getCityInfo方法,可以根据IP返回用户所在城市的基本信息,包括省、市名称、adcode、citycode、城市中心点,城市矩形边界等信息。

    相关文章

      网友评论

          本文标题:前端获取用户位置信息

          本文链接:https://www.haomeiwen.com/subject/spgubltx.html