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

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

问题

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

  • 核心代码

<script type="text/javascript" src="../../remogeo.js"></script>

 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) {
            // 
        }

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值