如何从 Leaflet 弹出窗口中删除标记和连接的多段线？

Question

我放置了几个标记，每个标记都用多段线连接到下一个标记。

我想单击标记，打开一个弹出窗口，然后单击一个按钮，该按钮将删除该标记和所有连接的多段线。

我将在弹出窗口中显示有关每个标记的信息，因此需要以这种方式显示标记删除选项。

我试过使用marker.on('click', onClick);，但这并没有给我我需要的东西。

我将线坐标存储在标记的选项中，如connectedLines

我已经放置了所有的标记和线条，但我的大脑卡在了如何移除线条上。我似乎无法将标记实例检索到弹出窗口中的按钮。

let coords = [[5654, 11659],[8274, 10847],[13374, 7801],[13956, 7563],[13801, 5943]];

let polylinePoints = [];

coords.forEach((item, index) => {
    marker = L.marker(map.unproject([item[0], item[1]], map.getMaxZoom()), {
        id: item[0]+item[1],
        connectedLines: []
    });

    if (index % 2 != 0) {
        polylinePoints.push(marker.getLatLng());
        marker.options.connectedLines.push(marker.getLatLng());
    } else {
        polylinePoints.push(marker.getLatLng());
        marker.options.connectedLines.push(marker.getLatLng());
    }
    
    marker.bindPopup('<button onclick="onClick()">Remove Marker</button>').addTo(map);
});

let polylines = L.polyline(polylinePoints).addTo(map);

function onClick(e) {
   // remove clicked marker and connected polylines
   // how to get the target data?
   // I have tried e.options, and e.target.options, but neither work
}

编辑

我开始认为我错误地将多段线添加到标记中，我应该成对使用它，所以我用以下代码替换了我推送点的代码

if (index < (coords.length - 1) && (index % 2) === 0) {
    marker.options.connectedLines.push(
        map.unproject([coords[index][0], coords[index][1]], map.getMaxZoom()),
        map.unproject([coords[index+1][0], coords[index+1][1]], map.getMaxZoom())
    );
}

polylinePoints.push(marker.getLatLng());

我不确定这是否让我更接近了，而且我仍然无法删除这些台词。

Answer 1

您可以向地图添加一个 popupopen 侦听器并从中获取标记：

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

function onClick(e) {
   popupMarker.remove();
   popupMarker.options.connectedLines.forEach((line)=>{
      line.remove();
   });
}