如何解决如何使用VueJs通过Leaflet动态加载许多标记? 当前解决方案我的问题
我有一个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)
});
这就是我会做的,但是我想有很多不同的方法可以实现您想要的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。