Nuxt.js项目中如何使用vue2.leaflet.markercluster？

Question

我正在尝试在 nuxt 项目中使用 vue2.leaflet.markercluster，但是在控制台中使用该组件时出现错误

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

我的代码：

<template>
  <div id="map" style="height: 100vh">
    <client-only>
      <l-map>
        <l-tile-layer></l-tile-layer>
        <v-marker-cluster>
    <v-marker v-for="c in elements" v-if="c.id !== null" :lat-lng="c.latlon">
      <v-popup :content="c.tooltipContent"></v-popup>
    </v-marker>
  </v-marker-cluster>
      </l-map>
    </client-only>
  </div>
</template>
<script>
import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster"
export default {
"elements": [{/*elements*/}]
}
</script>

Answer 1

1. 添加vue2-leaflet 或nuxt-leaflet

2. 安装 vue2-leaflet-markercluster。

    npm install --save vue2-leaflet-markercluster
   

3. 在 plugins 文件夹中创建一个名为 vue2-leaflet-markercluster.js 的文件，内容如下。

   import Vue from "vue";
   import * as L from "leaflet";
   import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster";
   import "leaflet/dist/leaflet.css";
   import "leaflet.markercluster/dist/MarkerCluster.css";
   import "leaflet.markercluster/dist/MarkerCluster.Default.css";
   
   Vue.component("v-marker-cluster", Vue2LeafletMarkerCluster);
   
    const LeafletPlugin = {
     install(Vue) {
      Vue.prototype.$L = L;
     }
    };
   
   Vue.use(LeafletPlugin);
   

4. 在您的 nuxt.config.js 文件中，将以下对象添加到插件数组中

   {src: '~/plugins/vue2-leaflet-markercluster.js', mode:'client'},
   

5. 在你的 html/component 中使用 v-marker 集群

    <div id="map-wrap" style="height: 100vh">
     <client-only>
      <l-map :zoom=13 :center="[55.9464418,8.1277591]">
       <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
      <v-marker-cluster>
       <l-marker :lat-lng="[55.9464418,7.1277591]"></l-marker>
       <l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>
       <l-marker :lat-lng="[55.9464418,9.1277591]"></l-marker>
      </v-marker-cluster>
      </l-map>
     </client-only>
    </div>