关于通过高德js-api获取定位在iPhone和Android手机上不同的表现

最新推荐文章于 2023-12-06 16:17:41 发布

kampoo

最新推荐文章于 2023-12-06 16:17:41 发布

阅读量7.7k

点赞数

分类专栏： LBS workflow 文章标签： LBS workflow

本文链接：https://blog.csdn.net/kampoo/article/details/83817932

版权

LBS 同时被 2 个专栏收录

1 篇文章

订阅专栏

workflow

1 篇文章

订阅专栏

开发了一个工单系统，其中有几处需要上传手机的当前经纬度，代码不复杂，直接引用了高德lbs服务的js-api接口，前端代码参考：


                <div id="map2" class="map"></div>

                <script type="text/javascript">
                    var map = new AMap.Map('map2', {
                        resizeEnable: true
                    });
                    AMap.plugin('AMap.Geolocation', function () {
                        var geolocation = new AMap.Geolocation({
                            enableHighAccuracy: true,//是否使用高精度定位，默认:true
                            timeout: 10000,          //超过10秒后停止定位，默认：5s
                            buttonPosition: 'RB',    //定位按钮的停靠位置
                            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                        });

                        //使用远程定位，见 remogeo.js
                        var remoGeo = new RemoGeoLocation();

                        //替换方法
                        navigator.geolocation.getCurrentPosition = function() {
                            return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
                        };

                        //替换方法
                        navigator.geolocation.watchPosition = function() {
                            return remoGeo.watchPosition.apply(remoGeo, arguments);
                        };

                        map.addControl(geolocation);
                        geolocation.getCurrentPosition();
                        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
                    });

                    //解析定位结果
                    function onComplete(data) {
                        console.info(data.position);
                        document.getElementById("fixLoc").value = 'GEOMETRYCOLLECTION(POINT(' +
                                data.position.lat + ' ' + data.position.lng + '))';

                        document.getElementById('status').innerHTML = '定位成功'
                        var str = [];
                        str.push('定位结果：' + data.position);
                        str.push('定位类别：' + data.location_type);
                        if (data.accuracy) {
                            str.push('精度：' + data.accuracy + ' 米');
                        }//如为IP精确定位结果则没有精度信息
                        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
                        document.getElementById('result').innerHTML = str.join('<br>');
                    }

                    //解析定位错误信息
                    function onError(data) {
                        document.getElementById('status').innerHTML = '定位失败(用探漏坐标替代)'
                        document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
                    }
                </script>

发布到企业微信中作为一个应用，在手机上进行测试到这一块代码的地方，iPhone测试没问题，会弹出隐私提示，确认后获取当前经纬度成功：

在Android手机（测试型号：小米5）上测试，结果出现了geolocation permission denied提示，百度一下发现不是个例，包括高德-LBS文档上也有说明：

C）getCurrentPosition返回的message原因解析：
......
Geolocation permission denied：用户禁用了定位权限，需要用户开启设备和浏览器的定位权限，并在浏览器弹窗中点击“允许使用定位”选项。
Geolocation permission denied：浏览器禁止了非安全域的定位请求，比如Chrome、IOS10已陆续禁止，这时候需要升级站点到HTTPS。注意Chrome不会禁止localhost等域名HTTP协议下的定位；

【检查应用权限设置】检查小米5的企业微信的定位权限：为打开状态；索性把企业微信的全部权限都打开，测试，结果仍然：Geolocation permission denied；

【将企业微信的定位权限先关闭-再打开】测试结果仍然：Geolocation permission denied；

【重启小米5手机】测试结果仍然：Geolocation permission denied；

【优化高德LBS代码】按照高德LBS的文档，可以加入远程定位。加入如下代码后，定位速度貌似加快了，但在Android手机上结果仍然失败，提示信息不变：



                        //使用远程定位，见 remogeo.js
                        var remoGeo = new RemoGeoLocation();

                        //替换方法
                        navigator.geolocation.getCurrentPosition = function() {
                            return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
                        };

                        //替换方法
                        navigator.geolocation.watchPosition = function() {
                            return remoGeo.watchPosition.apply(remoGeo, arguments);
                        };

【配置HTTPS】测试到这里，只能从这一行文字“浏览器禁止了非安全域的定位请求”下手解决了，将tomcat配置https：

    <Connector port="8443" protocol="org.apache.coyote.http11.Http11NioProtocol"
               maxThreads="150" SSLEnabled="true">
        <SSLHostConfig>
            <Certificate certificateKeystoreFile="conf/localhost-rsa.jks"
						certificateKeystoreType="JKS"
						certificateKeystorePassword="tomcat123"
                         type="RSA" />
        </SSLHostConfig>
    </Connector>

将微信应用的工作台应用主页修改为https://...:8443/...，因为是自签名，在PC网页上还好，提示“不安全网页”，在“高级”中选择继续浏览，是可以正常访问的。在企业微信中就让人很无语了，直接就是一个提示：