Leaflet使用setInterval刷新标记时重复问题求助

看起来你遇到的核心问题是用经纬度作为标记的唯一标识，这会导致飞行器移动后，旧的标记因为键不匹配而无法被更新，最终地图上堆积大量重复标记。另外代码里还有几个小语法错误，我来一步步帮你修复：

问题分析 #

• 错误的标记键：你用markers[i.lat, i.lng]作为标记的索引，但JavaScript中逗号运算符会返回最后一个值，所以实际键是i.lng，这完全没法唯一标识一个飞行器。当飞行器移动后，新的经纬度生成新的键，旧标记就被留在地图上了。
• setLatLng参数错误：Leaflet的setLatLng需要传入一个数组[lat, lng]，而不是两个单独的参数。
• 语法错误：filter里多了个多余的&&，会导致代码报错。
• 未处理消失的飞行器：如果某个飞行器从返回的JSON中消失，你没有移除对应的标记。

解决方案 #

我们需要用飞行器的唯一ID（也就是你遍历的data中的key）来作为标记的索引，这样不管飞行器怎么移动，都能找到对应的标记进行更新，同时清理掉已不存在的标记。

修改后的完整代码：

$(document).ready(function () {
  var markers = {}; // 用飞行器ID作为键存储标记
  // 初始化地图
  var coords = [33, 44];
  var zoomLevel = 6;
  var map = L.map('map').setView(coords, zoomLevel);
  
  L.tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
    attribution: 'Map data ©',
    maxZoom: 18
  }).addTo(map);

  // 定时更新飞行器位置
  setInterval(function () {
    $.ajax('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {
      type: 'GET',
      dataType: 'jsonp',
      timeout: 5000
    }).done(function (data, textStatus, jqXHR) {
      // 记录当前所有存在的飞行器ID
      var currentAircraftIds = Object.keys(data);
      
      // 遍历每个飞行器数据
      currentAircraftIds.forEach(key => {
        var positionData = data[key];
        var lat = positionData[1];
        var lng = positionData[2];
        
        // 过滤无效的经纬度
        if (!lat || !lng) return;
        
        var latLng = [lat, lng];
        
        if (markers[key]) {
          // 如果标记已存在，更新位置
          markers[key].setLatLng(latLng);
        } else {
          // 如果标记不存在，创建新标记并添加到地图
          markers[key] = L.marker(latLng).addTo(map);
        }
      });
      
      // 移除已不存在的飞行器标记
      Object.keys(markers).forEach(markerId => {
        if (!currentAircraftIds.includes(markerId)) {
          map.removeLayer(markers[markerId]);
          delete markers[markerId];
        }
      });
    }).fail(function () {
      // 可以添加请求失败的处理逻辑
      console.log('Failed to fetch aircraft data');
    });
  }, 5000);
});

关键修改点说明 #

• 用飞行器ID作为标记键：通过currentAircraftIds = Object.keys(data)获取每个飞行器的唯一ID，用这个ID作为markers对象的键，确保每个飞行器对应唯一的标记。
• 修正setLatLng参数：传入latLng数组，符合Leaflet的API要求。
• 清理无效标记：每次更新后，对比当前存在的飞行器ID和markers中的ID，移除那些已经不存在的标记，避免地图上残留无效标记。
• 修复语法错误：去掉filter中多余的&&，改用简单的条件判断跳过无效经纬度。

这样修改后，地图上就只会显示当前存在的飞行器标记，旧标记会被正确更新或移除，不会再出现重复的情况了。

内容的提问来源于stack exchange，提问作者Ali Ghassan