Cách xóa điểm đánh dấu khỏi bản đồ tờ rơi

Question

Tôi đang thêm điểm đánh dấu trên bản đồ khi người dùng nhấp vào.
Vấn đề là tôi chỉ muốn một điểm đánh dấu nhưng bây giờ bất cứ khi nào tôi nhấp vào bản đồ đánh dấu mới sẽ được thêm vào.
Tôi cố gắng để loại bỏ nó nhưng không có gì xảy ra:

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

Sử dụng .off() để unbind về nhấp chuột sự kiện.

Nó phải là một cái gì đó như:

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

tôi đã không kiểm tra nó, nhưng nó ít nhất nên đưa bạn đi đúng hướng.

Answer 2

Thay vì sử dụng .on để chụp và xử lý sự kiện, bạn có thể sử dụng .once. Bằng cách đó, sự kiện này sẽ chỉ bị bắt một lần và người xử lý sẽ tự hủy bỏ sau đó.

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

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

Nếu bạn cần tự mình hủy xử lý, bạn có thể sử dụng .off. Kiểm tra tham chiếu cho các phương thức sự kiện: http://leafletjs.com/reference.html#events

Tại sao mã của bạn ở trên không hoạt động, trên lần nhấp đầu tiên, bạn đang thử xóa điểm đánh dấu: map.removeLayer(marker), nhưng biến số không chứa L.Marker bản đồ không thể xóa nó. Bạn nên kiểm tra nếu nó được định nghĩa đầu tiên và chỉ sau đó loại bỏ nó:

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

Dưới đây là một ví dụ làm việc trên Plunker: http://plnkr.co/edit/iEcivecU7HGajQqDWzVH?p=preview