javascript - 如何在传单 map 中只添加一个标记

Question

我在用户点击时在 map 上添加标记。
问题是我只想要一个标记，但现在每当我单击 map 时都会添加新标记。
我正在尝试删除它，但没有任何反应:

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

您可以使用.once 来捕获和处理事件，而不是使用.on。这样，事件将只被捕获一次，之后处理程序将自行解除绑定(bind)。

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

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

如果您需要自己取消绑定(bind)处理程序，您可以使用 .off。检查事件方法的引用:http://leafletjs.com/reference.html#events

至于为什么上面的代码不起作用，第一次点击时您尝试删除标记:map.removeLayer(marker)，但是变量 marker不包含 L.Marker 实例，因此 map 无法将其删除。您应该先检查它是否已定义，然后才将其删除:

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