传单上下文菜单未显示在标记上

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

右键单击时会呈现上下文菜单，但标记没有图标，只呈现 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);

注意不要在设置选项集时混淆自己，特别是如果您的某些选项是字典数组。根据需要创建辅助变量以使您的代码更具可读性，例如：

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

传单上下文菜单未显示在标记上

Leaflet context menu not shown on marker

javascript

contextmenu

leaflet