uniapp vue3 谷歌地图

### 集成谷歌地图 API 到 UniApp Vue3 项目

#### 创建并配置 Google Maps API 密钥
为了能够在 UniApp 中使用谷歌地图服务，首先需要获取有效的 API Key。这一步骤涉及创建一个项目并在 Google Cloud Platform (GCP) 上启用必要的 API。

访问 GCP 控制台，创建新项目或选择已有项目，随后前往“API 和服务”下的“凭据”，点击“创建凭证”来获得浏览器密钥(API key)[^1]。确保启用了 **Maps JavaScript API**, **Geocoding API** 及其他可能需要用到的服务。

#### 修改 `manifest.json` 文件
为了让 HBuilderX 正确识别外部资源加载请求，在项目的根目录下找到 `manifest.json` 并编辑 `"app-plus"` 节点内的设置：

{
    "app-plus": {
        ...
        "distribute": {
            "webviewPlus": true,
            "permission": [
                {"name":"android.permission.ACCESS_FINE_LOCATION"},
                {"name":"android.permission.INTERNET"}
            ]
        }
    }
}

此操作允许应用程序访问互联网以及定位权限，这对于显示基于位置的地图数据至关重要[^2]。

#### 编辑 HTML 页面以引入 Google 地图脚本标签
由于 UniApp 是构建于 Web 技术之上，因此可以直接通过 `<template>` 标签内嵌入标准的 HTML 结构。对于每一个打算展示地图视图的页面来说，都需要在模板部分加入如下代码片段用于加载 Google 地图库：

<template>
  <div id="mapContainer"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.VUE_APP_GOOGLE_MAPS_API_KEY}&callback=initMap`;
  script.async = true;
  window.initMap = initMap;

  function initMap() {
      new google.maps.Map(document.getElementById("mapContainer"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
      });
  }

  document.head.appendChild(script);
});
</script>

<style scoped>
#mapContainer {
  height: 100vh;
  width: 100%;
}
</style>

上述代码展示了如何动态添加来自 Google 的 JS 库到当前文档头部，并定义了一个简单的初始化函数 `initMap()` 来渲染基本的地图实例。注意这里假设环境变量中已经包含了有效值作为 API 键名传递给 URL 参数。

#### 设置 .env 文件中的 API KEY
最后但同样重要的是，应该把之前从 GCP 获取的实际 API Key 存储在一个安全的地方——即 `.env` 文件里。这样做不仅有助于保护敏感信息免受意外暴露的风险，同时也方便后续维护工作：

VUE_APP_GOOGLE_MAPS_API_KEY=your_google_maps_api_key_here

完成以上步骤之后，重启开发服务器使更改生效即可看到集成后的效果。