リーフレットのコンテキストメニューがマーカに表示されていません

Question

Javaプロジェクトでthis libraryを使用しています。私はjspファイルに他のリーフレットプラグインと一緒にそれを含めています。このスクリプトでは、私は非常に奇妙で見苦しいと思われるエラーに遭遇します。コンテキストメニューでマップを初期化すると、マップのコンテキストメニューが表示されます。しかし、マーカーでも同様のことは起こりません。このマーカーの初期化、十分な

function handleItem(item) { 

    var tbody=$('#traffic-data').find('tbody'); 

    var row=document.createElement("tr"); 
    row.setAttribute('class','danger'); 
    row.setAttribute("from-lat",item.fromLat); 
    row.setAttribute("from-lng",item.fromLng); 
    row.setAttribute("to-lat",item.toLat); 
    row.setAttribute("to-lng",item.toLng); 

    var cenLat=(item.fromLat+item.toLat)/2; 
    var cenLng=(item.fromLng+item.toLng)/2; 

    var cell=document.createElement("td"); 
    geocodeService.reverse().latlng([cenLat,cenLng]).run(function(error, result) { 
     if (!error){ 
      cell.innerHTML=result.address.Match_addr; 
     } 
     cell.onclick=function(){ 
      focusJam(cenLat,cenLng); 
     }; 
     row.appendChild(cell); 

     cell=document.createElement("td"); 
     cell.innerHTML=new Date(); 
     row.appendChild(cell); 

     cell=document.createElement("td"); 
     cell.innerHTML=item.velocity; 
     row.appendChild(cell); 

     cell=document.createElement("td"); 
     row.appendChild(cell); 

     cell=document.createElement("td"); 
     cell.innerHTML=Math.round(L.latLng(item.fromLat,item.toLng) 
      .distanceTo(L.latLng(item.toLat,item.toLng))); 
     row.appendChild(cell); 

     cell=document.createElement("td"); 
     row.appendChild(cell); 

     cell=document.createElement("td"); 
     var action=document.createElement('span'); 
     action.setAttribute('class','glyphicon glyphicon-ok-sign'); 
     action.onclick=function(){ 
      row.removeAttribute('class'); 
      row.setAttribute('class','info'); 
      L.marker(L.latLng(cenLat,cenLng),{icon:customDefaultIcon},{ 
       contextmenu: true, 
       contextmenuWidth: 140, 
       contextmenuItems: [{ 
        text: 'Marker item', 
        index: 0 
       }, { 
        separator: 'Marker item', 
        index: 1 
       }] 
      }).addTo(map); 
     }; 
     cell.append(action); 
     action=document.createElement('span'); 
     action.setAttribute('class','glyphicon glyphicon-trash'); 
     action.onclick=function(){ 
      row.remove(); 
     }; 
     cell.append(action); 
     row.appendChild(cell); 

     tbody.append(row); 
    }); 

}; 

奇妙：この機能に見られるように、私のマーカーは、静的およびボタンがクリックされたときにのみ作成されていない

L.marker(L.latLng(cenLat,cenLng),{icon:customDefaultIcon},{ 
       contextmenu: true, 
       contextmenuWidth: 140, 
       contextmenuItems: [{ 
        text: 'Marker item', 
        index: 0 
       }, { 
        separator: 'Marker item', 
        index: 1 
       }] 
      }).addTo(map); 

が無駄に完全だったが、唯一のマーカーをレンダリング右クリックしてもコンテキストメニューは表示されません。しかし、私はこのように初期化した場合：

L.marker(L.latLng(cenLat,cenLng),{ 
       contextmenu: true, 
       contextmenuWidth: 140, 
       contextmenuItems: [{ 
        text: 'Marker item', 
        index: 0 
       }, { 
        separator: 'Marker item', 
        index: 1 
       }] 
      },{icon:customDefaultIcon}).addTo(map); 

コンテキストメニューがいつものように組み込みRightClickedときにレンダリングが、マーカーは何のアイコンを持っていないだけalt属性をレンダリングします。さらに、このコンテキストメニューは、それをクリックすると消えません。もう一度右クリックしても複製されます。このエラーは、あまりにもナンセンスであると

Answer 1

L.Marker constructorが中のいずれかのオプションセット取り、なぜ私が取得することはできません。

var m1 = L.marker(latlng, options);  // good 
var m2 = L.marker(latlng, opts1, opts2); // wrong 

だから、これは間違っている：

var opts1 = { 
      contextmenu: true, 
      contextmenuWidth: 140, 
      contextmenuItems: [{ 
       text: 'Marker item', 
       index: 0 
       }, { 
       separator: 'Marker item', 
       index: 1 
       }] 
      }; 

var opts2 = {icon:customDefaultIcon}; 

L.marker(L.latLng(cenLat,cenLng), opts1, opts2).addTo(map); 

をそして、これは正しいです：

var opts = { 
      contextmenu: true, 
      contextmenuWidth: 140, 
      contextmenuItems: [{ 
       text: 'Marker item', 
       index: 0 
       }, { 
       separator: 'Marker item', 
       index: 1 
       }], 
      icon: customDefaultIcon 
      }; 

L.marker(L.latLng(cenLat,cenLng), opts).addTo(map); 

yoを混乱させないように注意してくださいあなたのオプションのいくつかが辞書の配列である場合は特に、urselfはオプションのセットを設定します。コードを読みやすくするために、必要に応じて補助変数を作成します。例：

var menuitems = [{ 
        text: 'Marker item', 
        index: 0 
       }, { 
        separator: 'Marker item', 
        index: 1 
       }]; 

var opts = { 
      contextmenu: true, 
      contextmenuWidth: 140, 
      contextmenuItems: menuitems, 
      icon: customDefaultIcon 
      }; 

L.marker(L.latLng(cenLat,cenLng), opts).addTo(map);