You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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: '&copy; <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,提问作者Виктор Побережный

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.19 10:40:25