如何在Leaflet中点击多边形时同步添加新标记并移除旧标记

我帮你搞定这个问题啦！你的代码主要存在两个核心问题：一是图层组的移除逻辑绑定在了多边形集合的点击事件上，触发时机错误导致隔一次点击才会移除旧标记；二是每次点击多边形时都会往图层组里追加新标记，没有清空之前的内容，导致标记越积越多。

下面是修正后的完整代码：

var polys = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "stroke": "#555555", "stroke-width": 2, "stroke-opacity": 1, "fill": "#555555", "fill-opacity": 0.5, "polygon": "one" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -87.33032226562499, 37.90953361677018 ], [ -85.374755859375, 37.90953361677018 ], [ -85.374755859375, 39.036252959636606 ], [ -87.33032226562499, 39.036252959636606 ], [ -87.33032226562499, 37.90953361677018 ] ] ] } }, { "type": "Feature", "properties": { "stroke": "#555555", "stroke-width": 2, "stroke-opacity": 1, "fill": "#555555", "fill-opacity": 0.5, "polygon": "two" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -85.3857421875, 37.90953361677018 ], [ -83.3642578125, 37.90953361677018 ], [ -83.3642578125, 39.04478604850143 ], [ -85.3857421875, 39.04478604850143 ], [ -85.3857421875, 37.90953361677018 ] ] ] } }, { "type": "Feature", "properties": { "stroke": "#555555", "stroke-width": 2, "stroke-opacity": 1, "fill": "#555555", "fill-opacity": 0.5, "polygon": "three" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -87.34130859375, 36.90597988519294 ], [ -83.3642578125, 36.90597988519294 ], [ -83.3642578125, 37.91820111976663 ], [ -87.34130859375, 37.91820111976663 ], [ -87.34130859375, 36.90597988519294 ] ] ] } } ] }; 
var pts = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "id": "one", "animal": "bear" }, "geometry": { "type": "Point", "coordinates": [ -86.72607421875, 38.77121637244273 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "id": "one", "animal": "fish" }, "geometry": { "type": "Point", "coordinates": [ -86.583251953125, 38.487994609214795 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "id": "two", "animal": "tiger" }, "geometry": { "type": "Point", "coordinates": [ -84.276123046875, 38.38472766885085 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "id": "two", "animal": "lizard" }, "geometry": { "type": "Point", "coordinates": [ -85.067138671875, 38.70265930723801 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "id": "three", "animal": "dog" }, "geometry": { "type": "Point", "coordinates": [ -83.880615234375, 37.483576550426996 ] } }, { "type": "Feature", "properties": { "marker-color": "#7e7e7e", "marker-size": "medium", "marker-symbol": "", "id": "three", "animal": "horse" }, "geometry": { "type": "Point", "coordinates": [ -85.93505859374999, 37.709899354855125 ] } } ] }; 

var map = L.map("map", { center: [37.5, -85], zoom: 7 }); 
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map); 

var defaultStyle = { fillColor: "whitesmoke", color: "#171717", fillOpacity: 1, weight: 1 }; 

// 创建多边形GeoJSON并添加到地图
var polyJson = L.geoJson(polys, defaultStyle).addTo(map); 

// 用于存放点标记的图层组，提前添加到地图避免重复操作
var layerGroup = L.layerGroup().addTo(map); 

// 为每个多边形图层绑定点击事件
polyJson.eachLayer(function(layer){ 
  layer.on("click", function(e){ 
    var bbox = e.target.getBounds(); 
    var sw = bbox.getSouthWest(); 
    var ne = bbox.getNorthEast(); 
    map.fitBounds([sw, ne]); 

    // 获取当前点击多边形的ID
    var clickedPoly = e.target.feature.properties.polygon; 

    // 先清空图层组里的所有旧标记
    layerGroup.clearLayers(); 

    // 添加当前多边形对应的点标记到图层组
    L.geoJson(pts, { 
      pointToLayer: function(feature, latlng){ 
        if(feature.properties.id === clickedPoly){ 
          return L.circleMarker(latlng, { color: "red" }); 
        } 
      } 
    }).addTo(layerGroup); 
  }); 
});

关键修改说明： #

1. 提前初始化图层组并添加到地图：把layerGroup直接添加到地图，后续只需要更新组内的标记，不需要反复添加/移除整个图层组
2. 每次点击先清空旧标记：使用layerGroup.clearLayers()在添加新标记前清空所有旧内容，彻底解决标记叠加的问题
3. 移除多余的集合点击事件：删除了polyJson.on("click")这个逻辑，把所有图层更新操作统一放到单个多边形的点击事件中，确保触发时机准确
4. 优化点标记添加逻辑：在pointToLayer中只返回符合条件的标记，再统一添加到图层组，代码更简洁高效

这样修改后，每次点击多边形都会立即清空之前的点标记，然后只显示当前多边形对应的关联点，完全符合你的需求~

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