在Laravel 5.6.12与Vue.js中集成vue2-google-maps报错求助

嘿，我一眼就看出你哪里错啦——问题出在vue2-google-maps的初始化方式上，你没有按照插件的正确流程注册组件，才会触发这个“未正确注册组件”的报错。咱们一步步来修正：

1. 修正app.js里的插件初始化代码 #

你之前直接尝试注册vue2-google-maps组件的做法是错的，这个包是一个Vue插件，需要用Vue.use()来完成初始化，而不是手动注册单个组件。把你app.js里的相关代码改成这样：

import * as VueGoogleMaps from 'vue2-google-maps'

// 初始化插件，这里可以配置加载选项（如果已经在HTML里引入了maps脚本，下面的load配置可以省略）
Vue.use(VueGoogleMaps, {
  load: {
    // 如果你想把API key统一配置在这里，就可以去掉HTML里的script标签
    // key: '你的Google Maps API Key',
    // libraries: 'places'
  }
})

这样做之后，插件会自动帮你注册所有内置组件（比如<GmapMap>、<GmapMarker>这些），不需要你手动调用Vue.component()。

2. 保留模板里的组件用法不变 #

你模板里写的<GmapMap>是完全正确的，插件注册的组件名就是这个，之前的错误是因为你没初始化插件，导致Vue根本不知道这个组件存在。

3. 额外注意事项 #

• 确保HTML里的Google Maps脚本在Vue代码之前加载，这样插件初始化时才能找到全局的google对象；
• 如果你选择在Vue.use()里配置API key和libraries，记得把HTML里的<script>标签删掉，避免重复加载脚本引发冲突。

这样修改之后，你的Google Maps组件应该就能正常渲染啦！

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