嘿，我看了你的代码，问题根源很明确：每次地图移动后，你都在创建新的标记聚类组，却没移除旧的，而且标记的去重逻辑也没真正生效，导致标记越叠越多！

核心问题拆解 #

1. 重复添加聚类组：每次调用gotPlots时，你都会新建一个L.markerClusterGroup，然后直接map.addLayer(mapcluster)，但之前的聚类组还留在地图上，叠加后就会出现标记变粗的效果。
2. 去重逻辑失效：你定义了markers对象用来记录已添加的标记，但创建marker后没有把它存入markers，导致if (markers[plot.id]) continue;这个判断完全不起作用，同一ID的标记还是会重复创建。

修复方案 & 修改后的代码 #

步骤1：全局维护聚类组实例

把聚类组改成全局变量，初始化时只创建并添加到地图一次，避免重复添加图层：

// 全局变量调整
var map; 
var ajaxRequest; 
var plotlist; 
var plotlayers=[]; 
var marker; 
var markers = {}; // key is plot id, value is an L.Marker
var mapcluster; // 新增：全局聚类组实例

// 在initMap里初始化聚类组
function initMap(lat,lon,zoom){
  // ... 原有代码省略 ...
  
  map.setView(new L.LatLng(lat,lon),zoom);
  map.addLayer(osm);

  // 初始化聚类组并添加到地图（只做一次）
  mapcluster = L.markerClusterGroup({ 
    chunkedLoading: true,
    maxClusterRadius:60 
  });
  map.addLayer(mapcluster);

  askForPlots();
  map.on('moveend', onMapMove);
}

步骤2：每次更新前清空旧标记

在gotPlots开头，先清空聚类组里的所有标记，同时重置markers对象，确保每次都是基于当前地图范围重新加载标记：

function gotPlots() {
  if (ajaxRequest.readyState!=4 || ajaxRequest.status!=200) return;
  
  // 先清空现有聚类标记和记录
  mapcluster.clearLayers();
  markers = {};

  var resp = JSON.parse(ajaxRequest.responseText);
  var plotlist = resp.plots;

  // 移除无用的nodecounts统计（你当前代码里没用到这个变量）
  
  // 创建新标记并添加到聚类组
  for (var i = 0; i < plotlist.length; i++) {
    var a = plotlist[i];
    var title = a.name;
    
    var marker = L.marker(L.latLng(a.lat, a.lon), { 
      icon: new L.DivIcon({ 
        className: 'tooltips', 
        html: '<div class="triangle" id="'+a.id+'"><strong>'+a.price+'</strong></div>' 
      }) 
    });
    marker.bindPopup(title);
    mapcluster.addLayer(marker);
    
    // 存入markers对象，确保同一ID标记不会重复创建（如果接口返回重复数据的话）
    markers[a.id] = marker;
  }
}

步骤3：清理无用变量

你的clusters和nodecounts变量在当前代码逻辑中没有被使用，可以直接删除，避免代码冗余。

效果说明 #

修改后，每次地图移动触发askForPlots时，都会先清空之前的所有聚类标记，然后重新加载当前地图范围内的标记并添加到同一个聚类组里，彻底解决标记叠加的问题。

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