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

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

1 个答案: