Leaflet.contextmenu 个回调

Question

我正在努力解决 Leaflet.contextmenu 库中的问题。

我得到了一些不同的地图，保存在一个全局数组中。然后我使用 contextmenu 选项在我的地图中有一个 contextmenu。当我想定义我的回调函数时，我无法访问我的 arrMap[id]，因为该函数不知道我正在使用的 id。

我的问题是：如何将对象（例如 id）赋给 Leaflet.contextmenu 库的回调函数？

function x(){
    arrMap[id] = new L.map('map'+id,{
        contextmenu: true,
        contextmenuWidth: 140,
        contextmenuItems: [{
            text: 'Messung an dieser Position einfügen',
            callback: newMeasurement
        }, {
            text: 'zeige Koordinaten',
            callback: showCoordinates
        }, {
            text: 'Karte hier zentrieren',
            callback: centerMap
        }]
    });
}

function newMeasurement(e){
//do something with e AND ID
}

我想到了类似的东西：

//function x(){...
callback: newMeasurement(e,id)
//...}

function newMeasurement(e,id){
  console.log(id);
}

...但这不起作用:(

感谢大家的帮助！

Answer 1

您需要为您想要的值创建一个闭包。

首先，阅读 «How do JS closures work?» 问题。

然后，阅读 MDN reference for closures. And then,

先读那些。尝试理解这个概念。我是认真的。如果一味的复制粘贴代码，那Whosebug的大神们会打死一只小猫的。

现在，你想要一个事件处理函数，它只接收一个参数，比如

function newMeasurement(ev){
    // do something with 'ev' AND 'id'
}

那个函数需要接收一个参数，需要在某处有一个id变量。好吧，让我们创建一个函数 returns 一个函数：

function getMeasurementHandler(id) {
    return function(ev) {
        doSomething(ev, id);
    }
}

那样的话，如果你运行例如：

var handlerForId1234 = getMeasurementHandler(1234);

这大致相当于

var handlerForId1234 = function(ev) { doSomething(ev, 1234); }

让我们把它们放在一起：

for (var id=0; id<4; id++) {
    arrMap[id] = new L.map('map'+id, {
        contextmenuItems: [{
            text: 'Somethingsomething',
            callback: getEventHandlerForId(id)
        }]
    });
}

getCallbackFuncForId(id) {
    return function(ev) {
        console.log('Event ', ev, ' in ID ', id);
    }
}

Leaflet.contextmenu 个回调

Leaflet.contextmenu callbacks

javascript

contextmenu

leaflet