VueJS Leaflet中'moveend'事件多次触发问题求助
Leaflet 'moveend'事件重复触发问题求助
我在项目中遇到Leaflet的'moveend'事件重复触发问题,至今已尝试两周仍未解决,查阅并尝试过相关解决方案但均无效,现将代码附上,希望得到帮助。
<template> <div id="map"></div> </template> <script> export default { name: "ObjectMapView", props: ['coordinate'], data: function () { return { map: null, addressPoints: null, markers: null, } }, mounted: function() { this.initializedMap(); }, watch: { coordinate: function (val) { this.run(); } }, methods: { initializedMap: function () { this.map = L.map('map').setView([52.5073390000,5.4742833000], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(this.map); this.markers = L.markerClusterGroup(); }, run: function () { var map = this.map; var markers = this.markers; var getAllObjects = this.coordinate; var getBoundsMarkers; //切换筛选条件时清除图层 markers.clearLayers(); this.addressPoints = getAllObjects.map(function (latlng){ return [latlng.latitude, latlng.longitude, latlng.zip, latlng.object_id, latlng.archived]; }); map.addLayer(markers); //首次加载时仅将地图可视范围内的坐标传入地图 getBoundsMarkers = getAllObjects.filter((coord) => { if(!coord.latitude && !coord.longitude){ return false; } return map.getBounds().contains(L.latLng(coord.latitude, coord.longitude)); }); /* 响应地图可视范围边界变化, 传递可视范围内的坐标列表 */ console.log('getAllObjects_1', getAllObjects); map.on('moveend', function() { console.log('moveend'); console.log('getAllObjects_2', getAllObjects); getBoundsMarkers = getAllObjects.filter((coord) => { if(!coord.latitude && !coord.longitude){ return false; } return map.getBounds().contains(L.latLng(coord.latitude, coord.longitude)); }); eventHub.$emit('sendMarkers', getBoundsMarkers); }); //循环遍历坐标并添加到地图 for (var i = 0; i < this.addressPoints.length; i++) { var a = this.addressPoints[i]; var title = '<a href="/objects/' + a[3] + '" target="_blank">' + a[2] + '</a>'; //弹窗内容 var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title }); marker.bindPopup(title); markers.addLayer(marker); } eventHub.$emit('sendMarkers', getBoundsMarkers); } } } </script> <style scoped> #map { width: 97%; height: 100%; } </style>
内容的提问来源于stack exchange,提问作者Виктор Побережный
相关产品推荐
相关产品推荐

