在vue.js和Laravel 5.6.12中实现vue2-google-maps时出错 [英] Error while implementing vue2-google-maps in vue.js and Laravel 5.6.12

问题描述

我正在使用Laravel 5.6.12和vue.js

I am using Laravel 5.6.12 and vue.js

我正在尝试通过此github链接实施Google Maps

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

我遵循上面链接中提到的准则，如下所示.

I following the guidelines mentioned in above link as below.

安装

npm install vue2-google-maps

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

Then wrote below code in 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>

我遇到了以下错误.

-您是否正确注册了组件?递归 组件，请确保提供名称"选项.

- did you register the component correctly? For recursive components, make sure to provide the "name" option.

我已经在html头中添加了以下脚本.

I have already added below script in the html head.

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

我在上面的代码中缺少任何内容吗?

Am I missing anything in above code?

推荐答案

简短答案:您没有正确使用插件.

Short answer: You haven't used plugin correctly.

详细答案:默认情况下，vue2-google-maps不直接公开组件，而是公开注册所有Google Maps组件(例如<GmapMap/>)的插件.使用该库之前，您应该阅读 Quickstart .

Long answer: By default vue2-google-maps didn't expose components directly but instead it exposes plugin that registers all google maps components (e.g. <GmapMap/>). You should read Quickstart before using the library.

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

> Basic approach - Register plugin You should use plugin which will register all the desired components.

正确用法:

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>:

BTW: when using this approach you can remove <script src="https://maps.googleapis.com/..."></script> from you head with no issue:

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

> Alternative approach - Import only required components. The idea here is to import components directly. I'm not sure how it works with google maps api but in any case you can try

正确用法:

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);

这篇关于在vue.js和Laravel 5.6.12中实现vue2-google-maps时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！