用jquery循环谷歌地图标记不起作用

Question

我有一个显示地图和名称列表的页面。标记显示在地图上并且列表填充正确，但是当单击标记或列表时，我似乎无法使用正确的 contentstring 值打开标记。

单击标记时，它总是显示最后一个内容字符串，当单击列表中的一个项目时，它总是打开系列中的最后一个标记。

我希望有足够的信息继续下去。我只是觉得 infowindow.setcontent 和 infowindow.open 选择了正确的项目编号。

    HERE ARE SOME VARIABLES THAT ARE BEING USED IN THE CODE BELOW:
    data[i][3] = firstname
    data[i][4] = lastname
    data[i][6] = latitude
    data[i][7] = longitude

任何帮助将不胜感激！

谢谢 凯文

    contentString = new Array();

    for (var I = 0; I < data.length; I++) {

contentString[I] = '<b>' + data[I][3] + ' ' + data[I][4] + '</b>';
var thismarker = I;
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(data[I][6],data[I][7]),
    map: map,
    zIndex: I
});
$("<li />")
    .html('<span class="leadid">' + I + '</span>' + '<div class="leadname">' + data[I][3] + ' ' + data[I][4] + '</div>')
    .click(function(){
        infowindow.close();
        infowindow.setContent(contentString[thismarker]);
        infowindow.open(map, markers[thismarker]);
    })
.appendTo("#leadList"); 
google.maps.event.addListener(marker, "click", function(e){
    infowindow.close();
    infowindow.setContent(contentString[thismarker]);
    infowindow.open(map, markers[thismarker]);
});
markers[I] = marker;
    }

Answer 1

这里的问题是您在循环中设置点击处理程序并尝试在闭包中引用循环变量I（通过thismarker - 这里是一样的）。变量I 和thismarker 在每次循环迭代中都会更新，并且点击处理程序中的引用也会更新。因此，在 all 点击处理程序中，thismarker 指的是分配给该变量的 last 值。 （这就是为什么如果可以避免的话，在循环中定义函数通常是个坏主意。）

有几种不同的方法可以解决这个问题；最简单但不一定是最漂亮的方法是将有问题的代码包装在一个匿名函数中，并将循环变量作为参数传递：

for (var I = 0; I < data.length; I++) {
    // ... snip ...

    // start of anonymous function
    (function(thismarker) {
        // within the scope of this function,
        // "thismarker" will work as expected
        $("<li />")
            .html('<span class="leadid">' + I + '</span>' + '<div class="leadname">' + data[I][3] + ' ' + data[I][4] + '</div>')
            .click(function(){
                infowindow.close();
                infowindow.setContent(contentString[thismarker]);
                infowindow.open(map, markers[thismarker]);
            })
            .appendTo("#leadList"); 
        google.maps.event.addListener(marker, "click", function(e){
            infowindow.close();
            infowindow.setContent(contentString[thismarker]);
            infowindow.open(map, markers[thismarker]);
        });
    })(I); // end anonymous function, calling with loop variable
}