将 Google Maps VueJS 组件 (vue2-google-maps) 集成到 Laravel 刀片视图中

Posted 2023-02-22

【中文标题】将 Google Maps VueJS 组件 (vue2-google-maps) 集成到 Laravel 刀片视图中

【英文标题】：Integrating Google Maps VueJS Components (vue2-google-maps) into a Laravel blade view

【发布时间】：2019-10-30 02:12:25

【问题描述】：

我正在使用 vue2-google-maps npm 包将 Google Maps Vue JS 组件集成到 Laravel 应用程序视图中。 p>

根据npm package documentation，我正在使用以下方式从 npm 包中加载 vue 组件：

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>

但是，我收到以下错误：

未知的自定义元素：-您是否注册了组件 正确吗？对于递归组件，请确保提供“名称” 选项。

---

经过一番研究，我发现了this post，它使用了不同的组件名称，所以我尝试使用备用组件名称 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】：

插件中的组件仅在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
);