0

我创建了一个简单的 js 项目，它使用 Leaflet.js 绘制了一系列点。

然后我想用点击事件填充一个带有点特定数据的信息窗口。但我似乎无法让它工作。

这大致是我所做的：

var circle = L.circle(
    [data[i]['latitude'], data[i]['longitude']],
    50,
    { color: 'red', fillColor: 'red', fillOpacity: .5}
).addTo(map)
.bindPopup(data[i]['SCHNAME'])
.on('click', fill_info_window(data, i));

function fill_info_window(data, i){ /* fill data */ }

不幸的是，它会自动用最新数据填充窗口。

为什么它不起作用？

你可以在这里看到这个项目：

http://www.thisisstaffordshire.co.uk/images/localpeople/ugc-images/275796/binaries/leaguetableTemplate.html

4

2 回答 2

3

在这条线上：

.on('click', fill_info_window(data, i));

...您正在调用该fill_info_window函数，而不仅仅是引用它。你想做这样的事情：

.on('click', function() {
    fill_info_window(data, i);
});

除非你在一个循环中（那个i变量让我觉得你可能是）。如果你是，那么：

.on('click', makeHandler(data, i));

...makeHandler看起来像这样：

function makeHandler(theData, index) {
    return function() {
        fill_info_window(theData, index);
    };
}

您不希望我在循环中的第一个答案的原因是所有处理程序都将引用相同的data和i变量，并在调用处理程序时查看它们的值，而不是在注册时查看它们的值。这就是我们改用makeHandler函数的原因，所以它会在不改变的东西上创建一个闭包。更多关于我的博客：闭包并不复杂

于 2012-12-13T10:01:12.350 回答
0

您可能希望将函数绑定为处理程序，而不是调用它的结果。所以删除调用并使用….on('click', fill_info_window);. 另请参阅这篇关于事件处理的 quirksmode 文章：没有括号！.

于 2012-12-13T09:59:23.603 回答