我在用户点击时在地图上添加标记
问题是我只想要一个标记,但现在每当我点击地图时都会添加新标记
我试图删除它但没有任何反应:
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);
});
答案 0 :(得分:14)
您可以使用.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
答案 1 :(得分:1)
使用.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);
}
我没有测试它,但至少应该让你朝着正确的方向前进。