在 vue.js 和 Laravel 5.6.12 中实现 vue2-google-maps 时出错

Question

我正在使用 Laravel 5.6.12 和 vue.js

I am implementtrying to implement Google Maps with the help of this github link

我遵循上面链接中提到的准则如下。

安装

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>

我在上面的代码中遗漏了什么吗？

Answer 1

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

长答案：默认情况下vue2-google-maps 不直接公开组件，而是公开注册所有谷歌地图组件的插件（例如<GmapMap/>）。在使用该库之前，您应该阅读快速入门。

>基本方法——注册插件 您应该使用将注册所有所需组件的插件。

正确用法：

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

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places',
})

您的使用情况：

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

顺便说一句：使用这种方法时，您可以毫无问题地从 head 中删除 <script src="https://maps.googleapis.com/..."></script>：

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

正确用法：

import GmapMap from 'vue2-google-maps/dist/components/map.vue'
Vue.component('GmapMap', GmapMap)

您的使用情况：

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