Google maps api 3 在vue.js和Laravel 5.6.12中实现vue2谷歌地图时出错

我正在使用Laravel 5.6.12和vue.js

我遵循上述链接中提到的指导原则，如下所示

安装

npm install vue2-google-maps

然后在app.js中编写了以下代码

import * as VueGoogleMaps from 'vue2-google-maps'
Vue.component('vue2-google-maps', VueGoogleMaps);

最后在模板中的代码下方

<GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
></GmapMap>

我得到了下面的错误

-您是否正确注册了组件？对于递归 组件，请确保提供“名称”选项

我已经在html头部添加了下面的脚本

<script src="https://maps.googleapis.com/maps/api/js?key=apikey&libraries=places"></script>

---

以上代码中是否有遗漏？

简短回答：您没有正确使用插件

详细回答：默认情况下，

vue2谷歌地图

不会直接公开组件，而是公开注册所有谷歌地图组件的插件（例如

）。在使用库之前，您应该阅读Quickstart

>基本方法-注册插件 你应该使用插件来注册所有需要的组件

正确用法：

从“Vue”导入Vue
从“vue2谷歌地图”导入*作为VueLogleMaps
Vue.use（VueLogleMaps{
负载：{
密钥：“您的\u API\u令牌”，
图书馆:"地方",，
})

您的用法：

import*作为“vue2谷歌地图”中的VueLogleMaps
Vue.component（'vue2-google-maps'，vueloglemaps）；

顺便说一句：当使用这种方法时，您可以将

从

头部移除，而不会出现任何问题：

>替代方法-仅导入所需组件。这里的想法是直接导入组件。我不确定它如何与google maps api配合使用，但无论如何，您都可以尝试

正确用法：

从“vue2谷歌地图/dist/components/map.vue”导入GmapMap
Vue.组件（'GmapMap'，GmapMap）

您的用法：

import*作为“vue2谷歌地图”中的VueLogleMaps
Vue.component（'vue2-google-maps'，vueloglemaps）；
当我尝试第一部分时，即
Vue.use（VueLogleMaps
我收到错误您已在此页面多次包含Google Maps JavaScript API。这可能会导致意外错误。因为我在尝试第二部分时已在html头部添加了脚本，即从“vue2 Google Maps/dist/components/map.vue”vue.component（'GmapMap'，GmapCluster）导入GmapMap

我收到一个错误，GmapCluster不是defined@Pankaj代码中有一个输入错误。我刚刚修复了它。@Pankaj（对第一条评论）在切换Librarray之后，您必须从头部删除脚本，因为

vue2谷歌地图

内置了谷歌地图JavaScript API