リーフレットの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); 
}