如何修复循环以移除Leaflet中标记关联的所有Polyline？

问题核心：你的代码里，每个标记只绑定了自己右侧的那条折线（当前标记→下一个标记），但中间标记其实还关联着左侧的折线（上一个标记→当前标记），这条左侧折线没被加入当前标记的polylines数组，所以删除中间标记时只能删掉右侧那条，左侧的留着。

修改方案 #

创建折线时，把这条连接前后两个标记的折线，同时绑定到前一个标记和后一个标记的polylines数组里。这样不管删哪一个关联标记，都能移除这条共用的折线。

修改后的循环代码 #

// 先提前创建所有标记，避免循环里的变量覆盖
const markers = [];

// 第一步：先创建所有标记，暂不添加折线
coordinates.forEach((item, index) => {
    const marker = L.marker(map.unproject([item[0], item[1]], map.getMaxZoom()), {
        polylines: []
    }).bindPopup('<button onclick="removeMarker()">Remove</button>');
    markers.push(marker);
    marker.addTo(map);
});

// 第二步：创建折线并绑定到对应的两个标记
coordinates.forEach((item, index) => {
    if (index < coordinates.length - 1) {
        const polyline = L.polyline([
            map.unproject([item[0], item[1]], map.getMaxZoom()),
            map.unproject([coordinates[index+1][0], coordinates[index+1][1]], map.getMaxZoom())
        ]).addTo(map);
        
        // 把折线同时绑定到当前标记和下一个标记
        markers[index].options.polylines.push(polyline);
        markers[index+1].options.polylines.push(polyline);
    }
});

移除代码无需修改 #

var popupMarker;

map.on('popupopen', function(e) {
    popupMarker = e.popup._source;
});

function removeMarker(e) {
    map.removeLayer(popupMarker);
    popupMarker.options.polylines.forEach((line) => {
        map.removeLayer(line);
    });
}

逻辑说明 #

1. 先批量创建所有标记并存储到数组，避免原代码中marker变量被循环覆盖的问题。
2. 创建每一条折线时，将其同时添加到相邻的两个标记的polylines数组中：
   • 比如连接标记1和标记2的折线，会被加入标记1的polylines（右侧折线）和标记2的polylines（左侧折线）。
3. 这样删除任意标记时，它的polylines数组里包含了所有和它关联的折线，调用removeLayer就能全部移除。

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