uni-app 腾讯地图js更新后webview本地链接在ios上无法正常初始化地图

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app 腾讯地图js更新后webview本地链接在ios上无法正常初始化地图

产品分类

uniapp/App

开发环境、版本号和项目创建方式

项⽬目信息 详细信息
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 19045.5011
HBuilderX类型 正式
HBuilderX版本号 4.45
手机系统 iOS
手机系统版本号 iOS 18
手机厂商 苹果
手机机型 所有ios机型
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

示例代码

<web-view @message="receiveData" src="static/map.html" style="width: 100%; height: 100%; border: none"></web-view>

操作步骤

<web-view @message="receiveData" src="static/map.html" style="width: 100%; height: 100%; border: none"></web-view>

预期结果

在ios,和安卓上都正常初始化腾讯地图

实际结果

安卓没问题，ios地图初始话，缺少了图层

bug描述

【腾讯地图js 昨天跟新了后，导致现在的webview使用的本地链接的话，在ios上无法正常的初始化地图
目前我的处理方式是，找了腾讯和他们沟通后，给我的api回退版本，但是限期要求我不允许使用本地地址了


Harmonyos Next教程
1 回复

针对您提到的uni-app在腾讯地图JS SDK更新后，iOS平台上WebView本地链接无法正常初始化地图的问题，这通常是由于iOS的安全机制或者SDK更新后的兼容性问题导致的。以下是一个基本的代码示例和配置说明，旨在帮助您解决或排查问题。

1. 确保WebView组件配置正确

首先，确保在uni-app的manifest.json中配置了允许使用WebView，并且设置了允许访问的本地或外部链接。

// manifest.json 示例
{
  "mp-weixin": { // 或者其他平台配置
    "appid": "your-app-id",
    "setting": {
      "urlCheck": false // 禁用URL校验，如果是本地链接
    }
  },
  "webview": {
    "permissions": [
      "http://your-local-server-or-ip/*" // 允许访问的本地服务器地址
    ]
  }
}

2. WebView组件使用示例

在页面中嵌入WebView组件，并加载腾讯地图的JS SDK。

<template>
  <view>
    <web-view :src="mapUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mapUrl: 'http://your-local-server-or-ip/path-to-tencent-map-sdk.html' // 替换为实际的本地或外部链接
    };
  },
  onLoad() {
    // 可以在这里动态设置mapUrl，比如根据平台判断使用不同的URL
    if (process.platform === 'ios') {
      // 特殊处理iOS平台的URL，如果需要
      this.mapUrl = 'http://ios-specific-url/path-to-tencent-map-sdk.html';
    }
  }
};
</script>

3. 检查腾讯地图JS SDK的加载和初始化

确保在加载的HTML文件中（tencent-map-sdk.html），腾讯地图JS SDK的初始化代码没有错误。以下是一个基本的HTML文件示例，用于初始化腾讯地图：

<!DOCTYPE html>
<html>
<head>
  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>
</head>
<body>
  <div id="container" style="width:100%;height:100%;"></div>
  <script>
    function initMap() {
      var map = new TMap.Map(document.getElementById('container'), {
        center: new TMap.LatLng(39.984120,116.307503),
        zoom: 14
      });
    }
    window.onload = initMap;
  </script>
</body>
</html>

4. 调试与测试

  • 确保iOS设备的WebView组件能正确访问到指定的HTML文件。
  • 使用Xcode的Safari开发者工具进行远程调试，检查控制台是否有错误信息。
  • 检查腾讯地图JS SDK的API文档，确认是否有关于iOS平台的特定配置或更新说明。

通过上述步骤，您应该能够定位问题原因，并采取相应的解决措施。如果问题依旧存在，建议联系腾讯地图的技术支持团队获取更专业的帮助。

回到顶部