Question

我正在使用leaflet（v 0.7.7）并且我有一个Ajax调用，它以一些可点击的文本标签的形式获取一些服务器数据以绑定到我的地图。在我绑定从服务器获取的JSON数据的循环中，我有以下代码：

var item_name = L.marker([data.X, data.Y],
{
    icon: L.divIcon(
    {
        className:'MapTag', 
        iconAnchor: [10, 10],
        html:'<img src="/Images/Map/Item' + data.Id + '.png">' + data.Name 
    })
}).on('click', onItemClick(data.Id));

item_layer.addLayer(item_name);

在其他地方，我有onItemClick代码：

function onItemClick(item_id)
{
    alert(item_id);
}

现在，好消息是，如果我注释掉事件绑定部分，那么循环就完成了，并且传单的行为应该如此。但是，当我绑定click事件时，事情变得奇怪了。对于我绑定的集合中的每个项，都会触发一次该事件。当从服务器加载数据时，我会在每次循环时弹出一个警告，其中包含当前项目的ID。这感觉好像是被解雇了#o; onload＆＃39;而不是＆＃39; onclick＆＃39;。最重要的是，加载后它也不会在divIcons上注册点击。

这里肯定有我遗漏的东西，但我看不出它是什么。有什么建议吗？

这个问题类似于（Marker in leaflet, click event）

解决： 我将divIcon声明的最后一行更改为：

}).on('click', function(e){ alert(data.Id); });

现在按预期工作。我猜测奇怪的绑定行为是由于未绑定定义的方法引用和传单在其事件管理代码中具有某种功能崩溃。

我保留了＆＃39; e＆＃39;参数，因为它是传单文档显示的内容。我没有使用它，但如果其他人复制粘贴它，他们可能需要它。

Answer 1

您混淆了函数引用和函数调用的概念，并且您没有对项目ID进行closure。

如果您声明：

function onItemClick(id) { alert(id); }

这将打印对函数的引用：

console.log( onItemClick );

这会打印调用该函数的返回值（因为它不返回任何内容，这等于undefined）：

console.log( onItemClick(5) );

所以当你这样做时：

L.marker(....).on('click', onItemClick(id) );

函数被调用，on()接收该函数的返回值，即：

L.marker(....).on('click', undefined );

你想要做的是有一个返回一个函数的函数：

function onItemClick(id) { return function(){ alert(id); } }

这样，当你这样做时

L.marker(....).on('click', onItemClick(5) );

这将进行函数调用，并使用返回值，现在看起来像这样：

L.marker(....).on('click', function() { alert(5); } );

传单标记事件在错误的时间触发

1 个答案: