リーフレットドローマーカーがカスタムコントロールで正しく機能しない

Question

私はリーフレットドローを使用していますが、デフォルトコントロールの代わりにカスタムコントロールを作成しました。

私のカスタムコントロールでは、マーカを除いてすべてがうまくいきます（ポリライン、ポリゴン、円形、長方形）。
「マーカー」メニュー項目をクリックすると、マーカーをマップの上にドラッグして場所を選択するオプションを与えずに、マーカーのすぐ後ろにマーカーが配置されます（以下を参照）。

どうすればこの問題を解決できますか？

HTMLコード：

<div class="btn-group"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-pencil"></i> Drawing tools <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu"> 
      <li><a href="#" onclick="draw('polyline')">Line</a></li> 
      <li><a href="#" onclick="draw('polygon')">Polygon</a></li> 
      <li><a href="#" onclick="draw('rectangle')">Rectangle</a></li> 
      <li><a href="#" onclick="draw('circle')">Circle</a></li> 
      <li><a href="#" onclick="draw('marker')">Marker</a></li> 
     </ul> 
</div> 

のJavascript機能：

function draw(type) { 

    var po = ''; 
    switch(type) { 
     case 'polygon': 
      po = new L.Draw.Polygon(map); 
      break; 
     case 'polyline': 
      po = new L.Draw.Polyline(map); 
      break; 
     case 'rectangle': 
      po = new L.Draw.Rectangle(map); 
      break; 
     case 'circle': 
      po = new L.Draw.Circle(map); 
      break; 
     case 'marker': 
      po = new L.Draw.Marker(map); 
      break; 
    } 
    po.enable(); 
} 

おかげで、私の悪い英語のため申し訳ありません！

Answer 1

を、次の試してみてください。

HTMLコード：

<div class="btn-group"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-pencil"></i> Drawing tools <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu"> 
      <li><a href="#" class="draw-tool" data-draw='polyline'>Line</a></li> 
      <li><a href="#" class="draw-tool" data-draw='polygon'>Polygon</a></li> 
      <li><a href="#" class="draw-tool" data-draw='rectangle'>Rectangle</a></li> 
      <li><a href="#" class="draw-tool" data-draw='circle'>Circle</a></li> 
      <li><a href="#" class="draw-tool" data-draw='marker'>Marker</a></li> 
     </ul> 
</div> 

のJavascript機能：

$(function() { 
    $('.draw-tool').click(function(e) { 
     var type = $(this).attr('data-draw'); 
     if (type === 'marker') { 
      e.stopPropagation(); 
     } 
     draw(type); 
    }) 
}); 

function draw(type) { 

    var po = ''; 
    switch(type) { 
     case 'polygon': 
      po = new L.Draw.Polygon(map); 
      break; 
     case 'polyline': 
      po = new L.Draw.Polyline(map); 
      break; 
     case 'rectangle': 
      po = new L.Draw.Rectangle(map); 
      break; 
     case 'circle': 
      po = new L.Draw.Circle(map); 
      break; 
     case 'marker': 
      po = new L.Draw.Marker(map); 
      break; 
    } 
    po.enable(); 
} 

Answer 2

マーカーの

stopPropagationでこれを解決し

po = new L.Draw.Marker(map, { draggable : true});