Javascript 如何使用VueJs在传单中动态加载多个标记？

我有一个webapp，它在地图上显示许多标记，当用户移动地图时，这些标记会动态加载。我调用一个带边界的API，并返回一个标记列表

当前的解决方案

...
安装的（）{
让这个类=这个；
EventBus.$on（'new_markers'，函数（有效负载）{
for（有效载荷的常数标记）{
thisClass.markerMap[marker.id]=标记；
}
thisClass.markers=Object.values（thisClass.markerMap）
});
},

基于渲染标记的速度有多慢以及我的笔记本电脑有多热，我假设它每次都渲染所有标记

我的问题

---

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

我假设它每次都呈现所有标记

->您是否尝试console.log

标记

查看其中有多少项

如果要在地图上仅显示标记数组中新的标记，可以将

v-for=“marker in markers”

更改为

v-for=“marker in lastmarks

，将

lastMakers

作为仅返回最后项目的计算属性，如下所示：

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

现在，在将

Object.values（thisClass.markerMap）

分配给

thisClass.markers之前，您需要在EventBus回调函数中更新
lastMarkerIndex

要摆脱
thisClass
并改用
this
，您可以在回调中使用箭头函数，而不是
函数（有效负载）

总之，您的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)
});

这就是我要做的，但我想有很多不同的方法来实现你想要的。
只有那些尚未在标记列表中的标记，如果它们不在标记列表中，它们在哪里？我更新了我的问题，使之更精确。从API中，我根据缩放级别和边界得到不同的标记。这这就是为什么我认为只在地图上添加新标记会更有效。
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)
});