uni-app ios15 引用高德js sdk创建地图白屏

uni-app ios15 引用高德js sdk创建地图白屏

示例代码：

<!doctype html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">  
    <title>浏览器精确定位</title>  
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />  
    <style>  
        html,body,#container{  
            height:100%;  
        }  
        .info{  
            width:26rem;  
        }  
    </style>  
<body>  
<div id='container'></div>  
<div class="info">  
    <h4 id='status'></h4><hr>  
    <p id='result'></p><hr>  
    <p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>  
</div>  
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>  
<script type="text/javascript">  
    var map = new AMap.Map('container', {  
        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,   //定位成功后是否自动调整地图视野到定位点  

        });  
        map.addControl(geolocation);  
        geolocation.getCurrentPosition(function(status,result){  
            if(status=='complete'){  
                onComplete(result)  
            }else{  
                onError(result)  
            }  
        });  
    });  
    //解析定位结果  
    function onComplete(data) {  
        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>  
</body>  
</html>

操作步骤：

  • 使用上面的代码示例在新打包的5+app打开会白屏

预期结果：

  • ios15正常打开

实际结果：

  • ios15打开白屏

bug描述：

ios15的苹果手机使用高德官方的例子在5+app打开会白屏，定位是正常的。 以前在旧版hbuilder打包的在ios15可以正常显示。 高德地图demo 创建地图的时候页面卡死，然后白屏。

附件

表格

开发环境 版本号 项目创建方式
HBuilderX 3.2.6 云端打包

更多关于uni-app ios15 引用高德js sdk创建地图白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

我也遇到了这个问题

更多关于uni-app ios15 引用高德js sdk创建地图白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在升级ios15之前已经安装好的APP，升级ios15之后就会出现这种情况。卸载重装一下就正常了，不知道啥情况。

在iOS 15上使用uni-app（或5+ App）加载高德地图JS SDK出现白屏，通常与WKWebView的安全策略和地图SDK的兼容性有关。以下是关键原因和解决方案：

  1. WKWebView限制：iOS 15的WKWebView对非HTTPS资源加载更严格。高德地图JS SDK的部分资源可能通过HTTP加载，导致被阻塞。确保所有请求使用HTTPS，包括SDK自身（示例中已用HTTPS，但需检查其他依赖资源）。

  2. CSP（内容安全策略）问题：如果App配置了CSP，可能阻止地图脚本执行。在manifest.json的plus节点下调整CSP，允许高德域名：

    "plus": {
    "content-security-policy": "script-src 'self' https://webapi.amap.com 'unsafe-eval' 'unsafe-inline';"
}

    注意：放宽CSP可能带来安全风险，建议仅针对必需域名。

  3. 地图容器初始化时机：确保地图初始化在页面DOM加载完成后执行。在uni-app中，可在onReady生命周期进行：

    onReady() {
    // 初始化地图
    this.initMap();
}

  4. SDK版本兼容性：使用高德地图JS SDK的最新版本（如v2.0），旧版本可能不支持新iOS。更新SDK链接：

    <script src="https://webapi.amap.com/maps?v=2.0&key=您的key"></script>

  5. 硬件加速：iOS 15可能要求WebGL渲染。确保地图配置启用WebGL：

    var map = new AMap.Map('container', {
    resizeEnable: true,
    WebGLParams: { preserveDrawingBuffer: true } // 启用WebGL
});
回到顶部