Интеграция Компонентов Google Maps VueJS (vue2-google-maps) в представление лезвия Laravel - PullRequest
Новая
       48

Интеграция Компонентов Google Maps VueJS (vue2-google-maps) в представление лезвия Laravel

4 голосов
/ 16 июня 2019

Я интегрирую компонент Google Maps Vue JS в представление приложения Laravel , используя пакет vue2-google-maps npm.

Согласно документации npm Я загружаю компоненты vue из пакета npm, используя: 

import * as VueGoogleMaps from 'vue2-google-maps';

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

Затем я использую компоненты в виде лезвия с примером кода из документации: 

    <GmapMap
      :center="{lat:10, lng:10}"
      :zoom="7"
      map-type-id="terrain"
      style="width: 100%; height: 500px" 
      id="googleMap"
    >
        <GmapMarker
            :key="index"
            v-for="(m, index) in mapPoints"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center=m.position"
        >
        </GmapMarker>
    </GmapMap>

Однако я получаю следующую ошибку:

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

После некоторого исследования я наткнулся на этот пост , в котором использовались разные имена компонентов, поэтому я попытался использовать альтернативные имена компонентов gmap-map & gmap-marker , но это привело к той же ошибке. 

<gmap-map
  :center="center"
  :zoom="12"
  style="width:100%;  height: 400px;"
>
  <gmap-marker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    @click="center=m.position"
  ></gmap-marker>
</gmap-map>

Затем я попытался импортировать компоненты Map And Marker напрямую, а не все компоненты рекурсивно. Однако это приводит к той же ошибке: 

import GmapMap from 'vue2-google-maps/src/components/map';
import GmapMarker from 'vue2-google-maps/src/components/marker';

Vue.component('GmapMap', GmapMap);
Vue.component('GmapMarker', GmapMarker);

Что я делаю не так?

1 Ответ

1 голос
/ 20 июня 2019

Компоненты в плагине устанавливаются только когда опция installComponents установлена ​​на true.

https://github.com/xkjyeah/vue-google-maps/blob/v0.10.5/src/main.js#L69

import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'mapkey',
    libraries: 'places'
  },
  installComponents: true
});
...