传单：从地图中删除标记

Question

我加载了一些纬度/经度信息，然后用它来构建一条折线。 然后我想在每个折线顶点添加一个标记，当单击折线时将显示该标记。 如果单击不同（或相同）的折线，顶点应该会消失。

下面的代码创建折线和顶点标记。 但是顶点标记永远不会消失。

我尝试了几种方法，结果相同。我尝试将顶点标记存储在一个数组中并将它们直接添加到地图中，然后 map.removeLayer'ing 它们。那也行不通。如果我使用 L.featureGroup 而不是 layerGroup，它也不起作用。

很明显，我在某处遗漏了关于如何删除标记的要点。有人能指出我方法中的错误吗？

// trackMarkersVisible is a global L.layerGroup

// success is a callback from an ajax that fetches trackData, an array f lat/lon pairs
success: function (trackData) {
    // build an array of latLng's
    points = buildTrackPointSet(trackData, marker.deviceID);

    var newTrack = L.polyline(
            points, {
                color: colors[colorIndex],
                weight: 6,
                clickable: true
            }
    );

    $(newTrack).on("click", function () {
        trackMarkersVisible.clearLayers();

        $.each(points, function(idx, val) {
            var tm = new L.Marker(val);
            trackMarkersVisible.addLayer(tm);
        });
        map.addLayer(trackMarkersVisible);
    });
}   

Answer 1

如果没有 JSFiddle 或 Plunker，这很难说，因为我不确定您会得到什么行为，但使用 L.LayerGroup 的 clearLayers() 方法应该会从该组中删除所有层。如果组已经有图层，我会检查 onclick 处理程序：group.getLayers().length === 0 如果组为空，则添加标记，如果组有图层，则使用clearLayers。代码示例：

polyline.on('click', function (e) {
    if (group.getLayers().length === 0) {
        e.target._latlngs.forEach(function (latlng) {
            group.addLayer(L.marker(latlng));
        });
    } else {
        group.clearLayers();
    }
});

这对我有用，请参阅 Plunker 上的示例：http://plnkr.co/edit/7IPHrO?p=preview

仅供参考：默认情况下，L.Polyline 的实例始终是可点击的，因此您可以省略 clickable: true