Ошибка при реализации vue2-google-maps в vue.js и Laravel 5.6.12

Question

Я использую Laravel 5.6.12 и vue.js

Я пытаюсь реализовать Google Maps с помощью этой ссылки на github

Я следую указаниям, упомянутым в приведенной выше ссылке, как показано ниже.

Установка

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>

Я получил следующую ошибку.

- правильно ли вы зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name».

Я уже добавил нижеприведенный скрипт в заголовок html.

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

Я что-то пропустил в приведенном выше коде

Answer 1

Короткий ответ : Вы неправильно использовали плагин.

Длинный ответ : По умолчанию vue2-google-maps не предоставляет компоненты напрямую, а вместо этого предоставляетплагин, который регистрирует все компоненты карт Google (например, <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> из вас head без проблем:

> Альтернативный подход - импорт только необходимых компонентов .Идея в том, чтобы импортировать компоненты напрямую.Я не уверен, как это работает с API Google Maps, но в любом случае вы можете попробовать

Правильное использование:

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