下面给你 最完整、可直接运行、覆盖 App + 小程序 + H5 的：
《uni-app 使用 WebView 调用谷歌地图的完整实现流程》
包含：

✔ 小程序端可行方案
✔ App 端可行方案
✔ H5 端可行方案
✔ WebView 加载 Google Map
✔ 地图定位、标记、事件监听
✔ 常见报错解决方案（国内打不开、API Key、Content-Security-Policy 等）

🚀 总览：uni-app 调 Google Map 的可行性

端是否能用 Google Map需要方式
App（Android/iOS）✔ 完整支持WebView + Google JS API
H5✔ 完整支持直接引入 Google Maps JS
微信小程序❌ 不能直接使用 Google只能通过 web-view 加载 H5 外链
支付宝/抖音小程序❌ 同微信WebView 外链方式

结论：

真正能用 Google 地图的是：App + H5。
小程序全部只能“嵌外链页面 + WebView”。

🎯 你将实现的效果

  • uni-app 页面 → WebView
  • WebView 加载一个承载 Google Maps 的网页
  • 地图可缩放、拖拽
  • 可显示当前位置
  • 可添加 Marker
  • 小程序也能显示（通过 WebView 承载 H5）

🧩 目录

  1. 申请 Google Maps API Key
  2. 创建一个可单独访问的 googlemap.html
  3. uni-app 调用 WebView（小程序 + App）
  4. H5 端的处理
  5. uni-app 与 WebView 页面通信
  6. 常见报错及解决方案

✅ 第 1 步：申请 Google Maps API Key

打开 Google Cloud
创建项目 → 启用：

✔ Maps JavaScript API
✔ Geolocation API
✔ Geocoding API（如需逆地理）

然后获取 API Key。

✅ 第 2 步：创建一个 HTML 页面用于 WebView 承载

在 uniapp 项目根目录建立：

/static/googlemap/map.html

内容如下（可直接复制，用最新 API）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1" />

  <style>
    html, body, #map {
      width: 100%; height: 100%; margin: 0; padding: 0;
    }
  </style>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>

<body>
  <div id="map"></div>

  <script>
    let map;

    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 25.033964, lng: 121.564468 }, // 台北101
        zoom: 14
      });

      new google.maps.Marker({
        position: { lat: 25.033964, lng: 121.564468 },
        map,
        title: "Hello Google Maps!"
      });
    }

    initMap();
  </script>
</body>
</html>

📌 注意
如果是 小程序端，无法访问本地文件，需部署到 HTTPS：

例如：

https://yourdomain.com/googlemap.html

✅ 第 3 步：uni-app 通过 WebView 加载 Google 地图

📌 App 端（Android/iOS）

<!-- pages/map/map.vue -->
<template>
  <view class="container">
    <web-view :src="url"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 本地 HTML 方式（App 可用）
      url: '/static/googlemap/map.html'
      // 若需传参，可使用 ?lat=&lng=
    }
  }
}
</script>

<style>
.container, web-view {
  width: 100%; height: 100%;
}
</style>

✔ App 原生 WebView 完整支持 Google Maps
✔ 不受国内网络限制（Android 可以自带科学环境）

📌 微信小程序端（不能本地加载）

小程序 WebView 必须加载 HTTPS 外链页面。

<!-- pages/map/map.vue -->
<template>
  <view class="container">
    <web-view :src="h5Url"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      h5Url: "https://your-domain.com/googlemap.html"
    }
  }
}
</script>

必须配置：

/miniprogramRoot/project.config.json

{
  "webviewDomain": [
    "your-domain.com"
  ]
}

微信小程序严格限制外链域名，必须备案 + HTTPS。

📌 H5 端（最简单）

在网页中直接访问：

http://localhost:8080/#/pages/map/map

会自动加载 WebView → map.html，但 H5 不需要 WebView，可以直接用 <iframe> 方式优化：

⭐ 第 4 步：WebView 与 uni-app 通信

假设你要点击地图 Marker 后回传坐标到 uni-app。

HTML 页面 中发送消息给 uni-app：

uni.postMessage({
  data: {
    lat: position.lat(),
    lng: position.lng()
  }
});

uni-app 端接收（App + 小程序）

&lt;web-view :src="url" @message="onMessage">&lt;/web-view>


methods: {
  onMessage(e) {
    console.log("来自地图页面的数据：", e.detail.data);
  }
}

⛑ 常见问题与解决方案

❗ 1. 小程序无法打开 Google

因为国内网络被墙，小程序只能使用 WebView 加载外链。

解决：
WebView 页面必须部署在海外服务器（Google 可正常访问）

❗ 2. 出现 Google Map is not defined

原因：

  • HTML 中 script 未加载成功
  • API Key 未启用 Maps API
  • 国内网络无法访问 Google

❗ 3. Content-Security-Policy 拦截

在服务器添加：

Content-Security-Policy: frame-ancestors *;

❗ 4. App 出现空白 WebView

确保：

/static/googlemap/map.html

可访问。

🎉 最终完整方案总结（可直接用）

端实现方式
App（推荐）WebView 加载本地 HTML
小程序（唯一方式）WebView 加载 https 外链 HTML
H5WebView 或直接 iframe

App 体验最佳，小程序必须外链。