移动端H5调用高德地图API获取定位ios端问题

移动端H5调用高德地图API获取定位ios端问题,第1张

在移动端h5的开发中遇到了使用高德地图的API获取定位的问题。在安卓端没有问题,但在ios上不能正常d出位置授权窗口。查阅文档并实际尝试后找到如下原因和解决方案。

问题

iOS 11 *** 作系统的一大特性是对 http 形式访问页面的限制变得非常严格(相比iOS 10 和 iOS 9)。而高德提供的JS API功能均支持http和https两种协议访问,在iOS 11 *** 作系统上推荐使用https形式访问功能页面和接口。

解决方案

先将高德地图的JS API的版本升级到1.4.1版本以上

然后需要满足以下两点:

1、需要使用JS API的高精度定位功能,在iOS 11上,请通过https访问定位。

2、个人(或企业)网站在iOS 11系统下也调整成https形式对用户提供。

引入remogeo.js ,建议放置在本地:http://a.amap.com/jsapi_demos/static/remogeo/remogeo.js

核心代码



 AMap.plugin('AMap.Geolocation', function () {
                    let geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true, // 是否使用高精度定位,默认:true
                        timeout: 10000, // 超过10秒后停止定位,默认:无穷大
                        maximumAge: 0, // 定位结果缓存0毫秒,默认:0
                        convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true
                        showButton: true, // 显示定位按钮,默认:true
                        buttonPosition: 'LB', // 定位按钮停靠位置,默认:'LB',左下角
                        buttonOffset: new AMap.Pixel(10,
                            20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                        showMarker: true, // 定位成功后在定位到的位置显示点标记,默认:true
                        showCircle: true, // 定位成功后用圆圈表示定位精度范围,默认:true
                        panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:true
                        zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                    });

                    //判断是否是ios系统,如果是,则调用远程定位方法
                    if (AMap.UA.ios) {
                        //使用远程定位,见 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);
                        };
                    }
                    geolocation.getCurrentPosition();
                    AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息
                    AMap.event.addListener(geolocation, 'error', onError); // 返回定位出错信息
});


  function onComplete(obj) {
            var res = '经纬度:' + obj.position +
                '\n精度范围:' + obj.accuracy +
                '米\n定位结果的来源:' + obj.location_type +
                '\n状态信息:' + obj.info +
                '\n地址:' + obj.formattedAddress +
                '\n地址信息:' + JSON.stringify(obj.addressComponent, null, 4);
            xcoor = obj.position.lng;
            ycoor = obj.position.lat;
            
        }

        function onError(obj) {
            // 
        }

 

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/994260.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-21
下一篇2022-05-21

发表评论

登录后才能评论

评论列表(0条)

    保存