开发h5页面时IOS地图定位的一些坑

高德地图ios定位问题

第一次遇到这种问题 当时测试机的ios版本为IOS12 第一反应就是google啦 好家伙原来很多小伙伴都记录了这个问题

    //判断是否是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);
        };
    }
复制代码

再看看高德官网解决方案

基本和网上查找的和官方解决方案一致 都是使用远程定位解决 开始动手 在测试机上也完美运行

好景不长 21年7月份IOS15发布 没过多久业务方就反映ios15上无法定位。怎么又是这么相似的场景

开始查找问题 先看代码 定位模块代码基本没变 再在ios15以下的系统运行没有问题 还是继续google

这次就没有上次那么容易了 网上很多小伙伴都遇上此类问题了 而且都是无法解决

既然查不出来 继续翻官网api

使用了这个页面测试地址 发现跟我目前遇见的问题一样 IOS15以下 可以定位 IOS15就不行 然后又注意到这个定位测试页面是http的 我改为https试试？https定位地址

改完在测试机测了下 果然就定位成功了 这下就找到问题的解决方案了

1.在测试定位成功的页面打开控制台 找到差异代码 如果是https环境下 就不使用远程定位(官网demo坑人)

// ios环境切换到使用远程https定位 
if (AMap.UA.ios && document.location.protocol !== 'https:') { 
    //使用远程定位，见 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);
    }; 
}
复制代码

2.不能在http环境测试定位问题，必须在https才能定位成功

改代码发布上线 在线上完美解决该问题

ios14部分版本alert无法关闭问题

附带一份小插曲 在当时解决第一版ios定位问题的时候 还附带遇上了定位失败alert弹框无法关闭问题。。

查了下代码 才发现这个alert弹框是地图自带的提示框 啊这。。

这可难不到我 google在手天下我有

找了半天 很多都没有解决方案 这个倒是讲解的很详细

大致明白了 处理JS的线程和处理iOS警报视图的线程可能相互阻塞，使得“Close”按钮没有响应

由于这个alert是在地图api内的 那我就全局替换alert吧

//使用setTimeout延迟JS警报解决ios弹框无法关闭问题
window.alert = function(name){
  setTimeout(()=>{
    var iframe = document.createElement("IFRAME");
    iframe.style.display="none";
    iframe.setAttribute("src", 'data:text/plain,');
    document.documentElement.appendChild(iframe);
    window.frames[0].window.alert(name);
    iframe.parentNode.removeChild(iframe);
  },100)
};
复制代码

发布到测试 完美解决

在后续的IOS15中倒没再发现有这类问题