如何在Nuxt项目中集成vue3-google-map插件？

1. 安装依赖 #

在Nuxt项目根目录执行安装命令：

npm install vue3-google-map
# 或者用yarn
yarn add vue3-google-map

2. 创建客户端专属插件 #

由于谷歌地图依赖浏览器环境，需创建仅在客户端运行的插件文件：
在项目的plugins目录下新建vue3-google-map.client.ts（后缀.client确保仅客户端加载），内容如下：

import Vue3GoogleMap from 'vue3-google-map'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3GoogleMap, {
    load: {
      // 替换为你的谷歌地图API密钥
      key: 'YOUR_GOOGLE_MAPS_API_KEY',
      // 可选：按需加载额外库，比如地点搜索、几何计算等
      libraries: ['places']
    }
  })
})

3. 在页面/组件中使用组件 #

插件注册后，所有地图组件会全局可用，直接在Vue文件中使用即可，示例：

<template>
  <div style="height: 600px; width: 100%">
    <GMapMap
      :center="{ lat: 40.7128, lng: -74.0060 }"
      :zoom="12"
      map-type-id="roadmap"
      style="width: 100%; height: 100%"
    >
      <GMapMarker :position="{ lat: 40.7128, lng: -74.0060 }" />
    </GMapMap>
  </div>
</template>

<script setup lang="ts">
// 无需额外导入组件，已全局注册
</script>

4. 优化：用环境变量管理API密钥 #

推荐将API密钥存入环境变量，避免硬编码：
在项目根目录创建.env文件：

NUXT_PUBLIC_GOOGLE_MAPS_API_KEY=你的谷歌地图API密钥

然后修改插件文件中的密钥引用：

load: {
  key: process.env.NUXT_PUBLIC_GOOGLE_MAPS_API_KEY,
  libraries: ['places']
}

注意事项 #

• 确保你的谷歌API密钥已启用地图JavaScript API，并配置了正确的访问限制（比如允许项目域名）
• 若不需要全局注册组件，也可以在单个组件中按需导入：import { GMapMap, GMapMarker } from 'vue3-google-map'
• 所有与地图交互的逻辑建议放在客户端钩子中（比如onMounted），避免服务端渲染时出现环境不兼容问题

内容的提问来源于stack exchange，提问作者Ballazx