Làm cách nào để bạn thêm điểm đánh dấu vào bản đồ bằng cách sử dụng trình xử lý sự kiện leaflet (. Bấm vào, chức năng)

Question

Tôi đang cố sử dụng trình xử lý sự kiện để thêm điểm đánh dấu vào bản đồ. Tôi có thể quản lý điều này với chức năng gọi lại, nhưng không phải khi tôi tách chức năng khỏi trình xử lý sự kiện.

Callback (http://fiddle.jshell.net/rhewitt/U6Gaa/7/):

map.on('click', function(e){ 
    var marker = new L.marker(e.latlng).addTo(map); 
}); 

chức năng riêng biệt (http://jsfiddle.net/rhewitt/U6Gaa/6/):

function newMarker(e){ 
    var marker = new L.marker(e.latlng).addTo(map); 
} 

Answer 1

trong mã fiddle của bạn, chức năng của bạn là trong phạm vi sai. hãy thử di chuyển các chức năng bên trong hàm bản đồ thay vì trong phạm vi riêng của nó ... tức là thay vì:

}); 

function addMarker(e){ 
// Add marker to map at click location; add popup window 
var newMarker = new L.marker(e.latlng).addTo(map); 
} 

sử dụng

function addMarker(e){ 
// Add marker to map at click location; add popup window 
var newMarker = new L.marker(e.latlng).addTo(map); 
} 
}); 

Answer 2

Vấn đề chính là các biến map mà bạn sử dụng bên trong hàm addMarker không phải là biến mà bạn lưu trữ bản đồ đã tạo. Có một số cách để giải quyết vấn đề này nhưng dễ nhất có thể là gán bản đồ đã tạo cho biến số map được khai báo trong dòng đầu tiên. Đây là mã:

var map, newMarker, markerLocation; 
$(function(){ 
    // Initialize the map 
    // This variable map is inside the scope of the jQuery function. 
    // var map = L.map('map').setView([38.487, -75.641], 8); 

    // Now map reference the global map declared in the first line 
    map = L.map('map').setView([38.487, -75.641], 8); 

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', 
     maxZoom: 18 
    }).addTo(map); 
    newMarkerGroup = new L.LayerGroup(); 
    map.on('click', addMarker); 
}); 

function addMarker(e){ 
    // Add marker to map at click location; add popup window 
    var newMarker = new L.marker(e.latlng).addTo(map); 
}