uniapp谷歌地图不展示

### 解决 UniApp 中谷歌地图 API 不显示地图的问题

在开发过程中遇到的地图无法正常加载的情况通常由几个常见原因引起。为了确保谷歌地图能够在基于 Vue 的跨平台框架 UniApp 正常工作，需注意以下几点：

#### 1. 配置 Google Maps JavaScript API 密钥
确认已获取有效的 API Key 并正确配置于项目中。API key 应当具有访问 Google 地图服务的权限[^1]。

// main.js 或者 app.vue 文件内全局引入 google maps script
import { load } from '@googlemaps/js-api-loader';

load({
    apiKey: 'YOUR_API_KEY',
    libraries: ['places']
}).then(() => {
    console.log('Google Maps loaded');
});

#### 2. 设置正确的 WebView 属性
对于 Android 和 iOS 原生应用部分，在 `manifest.json` 文件里设置合适的 webview 参数来支持 HTTPS 请求以及第三方 cookie 存储功能[^2]。

{
  "app-plus": {
    ...
    "distribute": {},
    "webviewSubNVue": true,
    "webView": {
      "clearCache": false,
      "clearSessionCache": false,
      "cacheMode": "-1",
      "ignoreSslError": false,
      "userAgent": "",
      "subNVuesShareCookieWithWebView": true, // 允许 nvue 页面共享 Cookie 给 webview 使用
      "allowFileAccessFromFileURLs": true     // 启用 file 协议下读取文件系统的资源
    }
  }
}

#### 3. HTML 容器样式调整
确保放置 `<div>` 标签用于容纳地图实例的位置有足够的宽度和高度属性定义；否则即使脚本执行成功也可能因为容器尺寸过小而看不到实际效果[^3]。

<!-- index.html -->
<div id="map-container" style="width: 100%; height: 400px;"></div>

#### 4. 初始化 Map 实例并绑定到 DOM 节点上
最后一步是在页面初始化完成后创建一个新的 map 对象并将之附加至指定 ID 的 div 上面去[^4]。

let map;
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const element = document.getElementById('map-container');
      
      if (!element) return;

      map = new window.google.maps.Map(element, {
        center: { lat: -34.397, lng: 150.644 }, // 默认中心坐标
        zoom: 8                                 // 缩放级别
      });
    }
  }
};

通过以上四个方面的检查与修正可以有效解决大部分关于 UniApp 下谷歌地图插件不显示的问题。如果仍然存在异常，则建议进一步排查网络连接状况或是查看浏览器开发者工具中的控制台日志寻找更多线索。