리플렛 map.on ('click', function) 이벤트 핸들러를 사용하여지도에 마커를 추가하는 방법

Question

이벤트 핸들러를 사용하여지도에 마커를 추가하려고합니다. 콜백 함수를 사용하여이 작업을 관리 할 수는 있지만 함수를 이벤트 처리기와 분리하지는 않습니다.

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

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

분리 기능 (http://jsfiddle.net/rhewitt/U6Gaa/6/ 일) : 당신의 바이올린 코드에서

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

Answer 1

는, 함수가 잘못된 범위에 있습니다. 그것의 자신의 범위에 대신 map 함수 내부의 기능을 이동하려고 ... 즉, 대신 :

}); 

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

사용

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

Answer 2

주요 문제는 당신이 함수 내에서 사용하는 변수 mapaddMarker은 생성 된 맵을 저장하는 변수가 아닙니다. 이 문제를 해결하는 방법은 여러 가지가 있지만 가장 쉬운 방법은 생성 된 맵을 첫 번째 줄에 선언 된 변수 map에 할당하는 것입니다.

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