如何在 Leaflet 地图中添加一个标记点

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);
    });

- 1110

Answer 1

你可以使用.once来捕获和处理事件，而不是使用.on。这样事件只会被捕获一次，并且处理程序在此之后将解除绑定。

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

- iH8

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);
}

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

- grim

---

没有必要引入其他库，因为Leaflet有自己的绑定和解绑事件的方法：http://leafletjs.com/reference.html#events - iH8