uni-app 谷歌地图nvue页面白屏

uni-app 谷歌地图nvue页面白屏

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.8.7

手机系统：iOS

手机系统版本号：iOS 12.3

手机厂商：苹果

手机机型：6

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

uni.openLocation({
latitude: 39.909,
longitude: 116.39742,
success: function () {
console.log('success');
},
fail:function(e){
console.log(e);
}
});

操作步骤：

新建应用填入谷歌地图apikey，输入示例代码，打包自定义基座后运行

预期结果：

加载出地图

实际结果：

白屏



## bug描述：

APP端自定义基座：
nvue页面：打得开地图，但是一片空白刷不出来地图。开了vpn。手机打开“谷歌地图”app，他可以刷出来。
vue页面：未添加maps模块（这个问题找到了，不支持vue页面，相关链接里的回答）

请问这是什么原因？

更多关于uni-app 谷歌地图nvue页面白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

测试正常，查看一下你的apikey是否正确。

更多关于uni-app 谷歌地图nvue页面白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


nvue页面和vue页面都试了，都是高德地图

（这个问题找到了，重新打自定义基座）

UNIBF296DC

ios打出来的自定义基座是谷歌地图

uni.openLocation({ latitude: 39.909, longitude: 116.39742, success: function () { console.log(‘success’); }, fail:function(e){ console.log(e); } });
运行结果：success at pages/index/index.nvue:37

请问这有可能是什么原因引起的呢？

请问这有可能是什么原因引起的呢？

你上面都写了新建应用填入谷歌地图apikey，当然是谷歌地图！！！

就是谷歌地图啊，地图组件加载成功，但是一片空白刷不出来地图数据。开了vpn。手机打开“谷歌地图”app，他可以刷出来。

关于uni-app在nvue页面使用谷歌地图出现白屏的问题，可能的原因和解决方案如下：

  1. 检查API Key配置是否正确，确保在manifest.json中正确配置了谷歌地图的API Key，并且该Key已启用Maps SDK for iOS。

  2. iOS设备需要额外配置：

  • 在manifest.json的"app-plus"->“distribute”->"ios"下添加：
"maps": {
    "google": {
        "apiKey": "你的API_KEY"
    }
}
  1. 网络问题排查：
  • 确认设备网络正常
  • 测试使用手机浏览器直接访问谷歌地图网页版是否能打开
  • 尝试不同的VPN节点
  1. 代码修改建议：
uni.openLocation({
    latitude: 39.909,
    longitude: 116.39742,
    name: '测试位置',  // 添加地点名称
    address: '测试地址', // 添加详细地址
    success: function() {
        console.log('success');
    },
    fail: function(e) {
        console.log('fail:', JSON.stringify(e));
    }
});
回到顶部