如何从传单地图中删除标记

Question

我在用户点击时在地图上添加标记.
问题是我只想要一个标记,但现在每当我点击地图时都会添加新标记.
我试图删除它但没有任何反应:

var marker;
    map.on('click', function (e) {
        map.removeLayer(marker)

        marker = new L.Marker(e.latlng, { draggable: true });
        marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);

        marker.on('dragend', markerDrag);
    });

Answer 1

.on您可以使用,而不是使用捕获和处理事件.once.这样,事件将仅被捕获一次,并且处理程序将在此之后解除绑定.

map.on('click', function () {
    console.log('I fire every click');
});

map.once('click', function () {
    console.log('I fire only once');
});

如果您需要自己取消绑定处理程序,则可以使用.off.检查事件方法的参考:http://leafletjs.com/reference.html#events

至于上面的代码无法正常工作的原因,首次点击时你会尝试删除标记:map.removeLayer(marker),但变量marker不包含L.Marker实例,因此地图无法删除它.你应该检查它是否先被定义,然后才删除它:

var marker;
map.on('click', function (e) {
    if (marker) { // check
        map.removeLayer(marker); // remove
    }
    marker = new L.Marker(e.latlng); // set
});

这是关于Plunker的一个工作示例:http://plnkr.co/edit/iEcivecU7HGajQqDWzVH？p = preview

Answer 2

使用.off()解除点击事件的绑定。

它应该是这样的：

var marker;
map.on('click', mapClicked);

function mapClicked(e) {
    map.off('click', mapClicked);
    map.removeLayer(marker)

    marker = new L.Marker(e.latlng, { draggable: true });
    marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);

    marker.on('dragend', markerDrag);
}

我没有测试它，但它至少应该让你朝着正确的方向前进。