Leaflet.contextmenu 回调

2022-01-12 00:00:00 contextmenu leaflet javascript

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

I'm struggling with a problem in the Leaflet.contextmenu library.

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

I got a number of different maps, saved in a global Array. Then I'm using the contextmenu options to have a contextmenu in my maps. When I want to define my callback functions, I can't access my arrMap[id], because the function doesn't know the id I'm using.

我的问题是:如何将对象(例如 id)放入 Leaflet.contextmenu 库的回调函数中?

My question here is: How can I give an object (the id, for example) into a callback function of the Leaflet.contextmenu library?

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

...但这不起作用:(

...but that's not working :(

感谢大家的帮助！

推荐答案

你需要为你想要的值创建一个闭包.

You need to create a closure over the value you want.

首先，阅读 «JS 闭包如何工作?» 问题.

然后，阅读 MDN 闭包参考.然后，this question about how to create different Leaflet event handlers pass每个处理函数的值不同

首先阅读这些内容.尝试理解这个概念.我是认真的.如果你一味地复制粘贴代码，那么stackoverflow的神会杀了一只小猫.

Read those first. Try to understand the concept. I mean it. If you blindly copy-paste code, then the gods of stackoverflow will kill a kitten.

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

Now, you want to have an event handler function, which will receive just one parameter, like

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

那个函数需要接收一个参数，并且需要在某处有一个id变量.好的，那么，让我们创建一个返回函数的函数:

That function needs to receive one parameter, and needs to have an id variable somewhere. OK then, let's create a function that returns a function:

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

这样，如果你运行例如:

That way, if you run e.g.:

var handlerForId1234 = getMeasurementHandler(1234);

这或多或少等同于

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

让我们把它们放在一起:

Let's put it all together:

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

相关文章