标记未被删除：传单

Question

我正在使用传单api.Where我已经为标记添加了自定义控件。

我有一个按钮可以删除所有标记。

问题

通过包装，我必须删除所有标记但功能不起作用....浏览器没有给出任何控制台错误，所以我在黑暗中，没有完全理解 api 的结构。

脚本

            var markers = new L.FeatureGroup();
            map.on('click', function markerPlace(e) {
                //L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
            marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
                markers.addLayer(marker);
                map.off('click', markerPlace);
            });
        }).addTo(map);

    //onClick this button we have to remove all marker
    <button id="removeMarker">Remove Markers</button>      
    $('#removeMarker').click(function (e) {map.removeLayer(markers) });

如果有人对此有所了解，请提供帮助或任何类型的参考 appreciated.Thanks 您的时间

Answer 1

当您正确识别代码时，您可以轻松发现第一个错误：

var markers = new L.FeatureGroup();

map.on('click', function markerPlace(e) {
    //L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
    marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
    markers.addLayer(marker);
    map.off('click', markerPlace);
});

}).addTo(map); // <- What is this doing here

那应该会给你一个很大的控制台错误。我假设属于你的 L.FeatureGroup 是这样的：

var markers = new L.FeatureGroup().addTo(map); <- Moved to here

map.on('click', function markerPlace(e) {
    //L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
    marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
    markers.addLayer(marker);
    map.off('click', markerPlace);
});

所以您希望将标记添加到名为 markers 的 L.FeatureGroup 那么为什么要将它们添加到地图中呢？

marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);

应该改为：

marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(markers);

简而言之：在地图的点击事件中，您正试图从地图中移除标记要素图层，该要素图层尚未正确添加，您已将标记添加到地图，而不是要素组。

PS：您想删除标记，但实际上您想要做的是删除整个特征组。如果您想保留特征组并仅删除标记，您也可以使用 L.FeatureGroup:

的 clearLayers 方法

markers.clearLayers();

标记未被删除：传单

Marker not being removed : Leaflet

leaflet

angular-leaflet-directive

dc.leaflet.js