Контекстное меню лифлета не показано на маркере

Question

Я использую this library на моем проекте Java. Я включил его вместе с некоторыми другими плагинами в мой файл 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); 

Будьте осторожны, чтобы не путать йо urself при настройке набора параметров, особенно если некоторые из ваших опций являются массивами словарей. При необходимости создайте переменные aux, чтобы сделать ваш код более удобочитаемым, например:

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