如何使用VueJs通过Leaflet动态加载许多标记？ 当前解决方案我的问题

编程问答 2022-06-09

问题描述

我有一个Web应用程序，可在地图上显示许多标记，这些标记在用户移动地图时会动态加载。我使用范围调用API，并获取标记列表。

当前解决方案

<l-map v-if="showMap" :zoom="zoom" :center="center" @update:bounds="boundsUpdated" style="height: 100%">
    <l-tile-layer :url="url" :attribution="attribution"/>
    <l-marker v-for="marker in markers" :key="marker.id" :lat-lng="marker.coordinates" >
      <l-icon
          icon-url="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png">
      </l-icon>
    </l-marker>
</l-map>

...

mounted() {
    let thisClass = this;
    EventBus.$on('new_markers',function (payLoad) {
      for (const marker of payLoad) {
        thisClass.markerMap[marker.id] = marker;
      }
      thisClass.markers = Object.values(thisClass.markerMap)
    });
  },

根据渲染标记的速度以及笔记本电脑的发热程度，我认为它每次都在渲染所有标记。

我的问题

如何只用传单加载标记列表中的新标记，而不是每次加载整个列表？

解决方法

I assume it is rendering all the markers every time->您是否尝试console.log markers来查看里面有多少物品？

如果您只想在地图上显示标记数组中的新标记，您可以做的是将v-for="marker in markers"更改为v-for="marker in lastMarkers，其中lastMakers是一个计算属性，返回只有最后一项，例如：

lastMarkers() {
 return this.markers.slice(this.lastMarkerIndex);
}

现在您需要在将lastMarkerIndex分配给Object.values(thisClass.markerMap)之前更新EventBus回调函数中的thisClass.markers

要摆脱thisClass并使用this，您可以使用箭头函数代替function (payload)

所以总结一下您的EventBus监听器可能像这样：

EventBus.$on('new_markers',(payload) => {
  for (const marker of payload) {
    this.markerMap[marker.id] = marker;
  }
  this.lastMarkerIndex = this.markers.length - 1;
  this.markers = Object.values(this.markerMap)
});

这就是我会做的，但是我想有很多不同的方法可以实现您想要的。

javascriptleafletvue.jsvue2leaflet