uni-app openLocation打开窗口后白屏

uni-app openLocation打开窗口后白屏

示例代码：

uni.openLocation({
latitude: 39.916527,
longitude: 116.397128,
name: '天安门广场',
address: '天安门广场',
});

操作步骤：

  1. 调用openLocation接口，打开新的窗口，地图显示对应位置

预期结果：

  1. 能正常显示位置

实际结果：

  1. 窗口正常打开，但是内容显示不正常，页面白屏或者只有一个箭头，没有地图上的详细位置信息

bug描述：

  1. uni.openLocation打开页面白屏或者只有一个箭头图标
  2. 下载uniapp官方的Android示例，对应的演示页面也是白屏

| 开发环境 | 版本号 | 项目创建方式 |
|---------|-------|-------------|
| Windows | win11 | HBuilderX   |
| Android | Android 13 | - |
| OPPO    | -      | - |

更多关于uni-app openLocation打开窗口后白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

暂未复现该问题，请尝试一下验证方案： 1、切换为安卓模拟器进行测试 2、升级至HBX4.14版本进行测试

更多关于uni-app openLocation打开窗口后白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


同样的问题，解决了吗

高德地图可以，百度就空白

在 uni-app 中，使用 uni.openLocation 打开地图时出现白屏问题，可能是由于以下原因之一导致的。以下是一些可能的解决方案：

1. 检查 latitude 和 longitude 参数

确保传入的 latitude 和 longitude 参数是有效的数值，且在合理范围内（例如：纬度范围是 -90 到 90，经度范围是 -180 到 180）。

uni.openLocation({
  latitude: 39.908823, // 有效的纬度值
  longitude: 116.39747, // 有效的经度值
  success: function () {
    console.log('打开地图成功');
  },
  fail: function (err) {
    console.log('打开地图失败', err);
  }
});

2. 检查设备是否支持地图功能

在某些设备上，可能没有安装地图应用（如高德地图、百度地图等），或者设备不支持地图功能。可以通过 uni.getSystemInfo 检查设备是否支持地图功能。

uni.getSystemInfo({
  success: function (res) {
    if (!res.platform || !res.system) {
      console.log('设备不支持地图功能');
    } else {
      console.log('设备支持地图功能');
    }
  }
});

3. 检查地图应用是否存在

uni.openLocation 依赖于设备上安装的地图应用。如果设备上没有安装地图应用，可能会导致白屏。可以提示用户安装地图应用。

4. 检查网络连接

如果设备网络连接不稳定或无法访问地图服务，可能会导致白屏。确保设备网络正常，并提示用户检查网络连接。

5. 检查权限

在某些设备上，可能需要获取位置权限才能正常打开地图。确保应用已经获取了必要的位置权限。

6. 调试错误信息

通过 fail 回调捕获错误信息，查看具体原因。

uni.openLocation({
  latitude: 39.908823,
  longitude: 116.39747,
  success: function () {
    console.log('打开地图成功');
  },
  fail: function (err) {
    console.log('打开地图失败', err);
  }
});

7. 检查 uni-app 版本

确保使用的是最新版本的 uni-app。如果是旧版本，可能存在兼容性问题，建议升级到最新版本。

8. 模拟器和真机测试

在模拟器上运行时，可能会出现白屏问题。建议在真机上进行测试。

9. 使用其他地图插件

如果 uni.openLocation 仍然无法正常工作，可以考虑使用第三方地图插件（如高德地图、百度地图的 SDK）来实现地图功能。

示例代码

以下是一个完整的示例代码：

uni.openLocation({
  latitude: 39.908823, // 纬度
  longitude: 116.39747, // 经度
  name: '天安门广场', // 位置名称
  address: '北京市东城区', // 详细地址
  success: function () {
    console.log('打开地图成功');
  },
  fail: function (err) {
    console.log('打开地图失败', err);
  }
});
回到顶部