vue3-google-map 与 Nuxt

Question

我已经在一些 Vue 项目中使用了这个

vue3-google-map

插件，但现在我正在开发一个 Nuxt 项目，我也想在这里使用它。有什么办法可以将其添加到Nuxt吗？

这是文档：

Answer 1

据我所知，该库不支持在 Nuxt 3 中用作全局“插件”。

我能找到的大多数工作示例以及我们在项目中使用的方法都执行以下操作：

1. 使用您使用的包管理器在 Nuxt 应用程序中安装插件。
2. 跳过添加插件

   ~/plugins/

3. 使用以下方式在组件或模板中导入地图组件：

import { GoogleMap, Marker, etc } from 'vue3-google-map'

注意：Jakub 建议的方法虽然对许多此类依赖项有效，但对我们的 vue3-google-map 不起作用。 Jabub 的答案是

fawmi/vue-google-maps

的工作方法，已从 here

稍作调整

Answer 2

您应该能够在 Nuxt 项目中使用 vue3-google-map 插件。

1. 使用终端安装插件：

   npm install vue3-google-map
   

2. 在 Nuxt 项目的插件目录中创建一个名为 vue-google-maps.js 的新文件。

3. 在vue-google-maps.js文件中，导入vue3-google-map插件并将其添加到Nuxt插件数组中：

   import Vue from 'vue';
   import VueGoogleMaps from 'vue3-google-maps';
   
   Vue.use(VueGoogleMaps, {
     load: {
       key: 'YOUR_API_KEY',
       libraries: 'places',
     },
   });
   

4. 在 Nuxt 配置文件 (nuxt.config.js) 中，将 vue-google-maps.js 文件添加到 plugins 数组中：

   export default {
     // ...
     plugins: [
       // ...
       '@/plugins/vue-google-maps',
     ],
     // ...
   }
   

5. 在您的 Vue 组件中，您现在可以使用 vue3-google-map 插件提供的

   <GmapMap>

   组件来显示 Google 地图。

Answer 3

Google 地图 api 也很容易在 Nuxt3 中自行设置。查看这个 github 存储库，它非常简单：

https://github.com/valenciaga1231/Nuxt3GoogleMaps