Jak dodać znacznik do mapy za pomocą ulotki map.on ("click", funkcja) obsługi zdarzeń

Question

Próbuję użyć funkcji obsługi zdarzeń, aby dodać znacznik do mapy. Mogę sobie z tym poradzić za pomocą funkcji zwrotnej, ale nie wtedy, gdy oddzielę funkcję od obsługi zdarzenia.

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

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

Oddzielna funkcja (http://jsfiddle.net/rhewitt/U6Gaa/6/):

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

Answer 1

w kodzie skrzypce, czynność jest w niewłaściwym zakresie. spróbuj przenieść funkcji wewnątrz funkcji mapy zamiast w jego własnym zakresie ... czyli zamiast:

}); 

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

użycie

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

Answer 2

Głównym problemem jest to, że zmienna map że używasz wewnątrz funkcji addMarker nie jest zmienną, w której przechowujesz utworzoną mapę. Istnieje kilka sposobów rozwiązania tego problemu, ale najprościej jest przypisać utworzoną mapę do zmiennej map zadeklarowanej w pierwszym wierszu. Oto kod:

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