Come si aggiunge un marcatore alla mappa utilizzando il leaflet map.on ('click', funzione) gestore di eventi

Question

Sto provando a utilizzare un gestore di eventi per aggiungere un marker alla mappa. Posso gestirlo con una funzione di callback, ma non quando separo la funzione dal gestore di eventi.

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

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

funzione separata (http://jsfiddle.net/rhewitt/U6Gaa/6/):

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

Answer 1

nel codice violino, la funzione è nel campo di applicazione sbagliata. provare a spostare la funzione all'interno della funzione carta invece che in essa la propria portata ... cioè, invece di:

}); 

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

uso

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

Answer 2

Il problema principale è che la variabile map di utilizzare all'interno della funzione addMarker non è la variabile in cui si memorizza la mappa creata. Esistono diversi modi per risolvere questo problema, ma il più semplice può essere assegnare la mappa creata alla variabile map dichiarata nella prima riga. Ecco il codice:

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