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>

我收到了以下错误。

- 您是否正确注册了该组件？用于递归组件，请务必提供＆＃34;名称＆＃34;选项。

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

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

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

Answer 1

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

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

<强>＆GT;基本方法 - 注册插件您应该使用将注册所有所需组件的插件。

正确使用：

<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);移除<script src="https://maps.googleapis.com/..."></script>而不会出现任何问题：

<强>＆GT;替代方法 - 仅导入所需组件。这里的想法是直接导入组件。我不确定谷歌地图api是如何运作的，但无论如何你可以试试

正确使用：

head

您的用法：

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

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

1 个答案: