Question

使用循环时添加GMarkers时遇到问题。解释问题的最好方法是显示代码，我想：）

这有效：

htmls[0] = "<div style=\"margin-bottom:10px; \"><table><tr><td><img src=\"" + result[0].UserImageURI + "\" width=\"80\" height=\"80\" /></td><td style=\"vertical-align:top; \"><strong>" + result[0].Username + "</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (" + result[1].Age + ")<br/>" + result[0].Country + "<br/>" + result[0].Distance + " KMs away<br/><a href=\"profile.aspx?lfid=" + result[0].Userid + "\">View Profile</a></td></tr></table></div>";
    latlngs[0] = new GLatLng(result[0].Latitude, result[0].Longitude);
    if (result[0].Gender == "F") {
        markers[0] = new GMarker(latlngs[0], { draggable: false, icon: fIcon });
    } else {
        markers[0] = new GMarker(latlngs[0], { draggable: false, icon: mIcon });
    }
    GEvent.addListener(markers[0], "click", function () {
        markers[0].openInfoWindowHtml(htmls[0]);
    });
    map.addOverlay(markers[0]);
    htmls[1] = "<div style=\"margin-bottom:10px; \"><table><tr><td><img src=\"" + result[1].UserImageURI + "\" width=\"80\" height=\"80\" /></td><td style=\"vertical-align:top; \"><strong>" + result[1].Username + "</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (" + result[1].Age + ")<br/>" + result[1].Country + "<br/>" + result[1].Distance + " KMs away<br/><a href=\"profile.aspx?lfid=" + result[1].Userid + "\">View Profile</a></td></tr></table></div>";
    latlngs[1] = new GLatLng(result[1].Latitude, result[1].Longitude);
    if (result[1].Gender == "F") {
        markers[1] = new GMarker(latlngs[1], { draggable: false, icon: fIcon });
    } else {
        markers[1] = new GMarker(latlngs[1], { draggable: false, icon: mIcon });
    }
    GEvent.addListener(markers[1], "click", function () {
        markers[1].openInfoWindowHtml(htmls[1]);
    });
    map.addOverlay(markers[1]);

但是当我把它放在循环中时，它不起作用......

for (i = 0; i < result.length; i++) {
        htmls[i] = "<div style=\"margin-bottom:10px; \"><table><tr><td><img src=\"" + result[i].UserImageURI + "\" width=\"80\" height=\"80\" /></td><td style=\"vertical-align:top; \"><strong>" + result[i].Username + "</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (" + result[i].Age + ")<br/>" + result[i].Country + "<br/>" + result[i].Distance + " KMs away<br/><a href=\"profile.aspx?lfid=" + result[i].Userid + "\">View Profile</a></td></tr></table></div>";
        latlngs[i] = new GLatLng(result[i].Latitude, result[i].Longitude);
        if (result[i].Gender == "F") {
            markers[i] = new GMarker(latlngs[i], { draggable: false, icon: fIcon });
        } else {
            markers[i] = new GMarker(latlngs[i], { draggable: false, icon: mIcon });
        }
        GEvent.addListener(markers[i], "click", function () {
            markers[i].openInfoWindowHtml(htmls[i]);
        });
        map.addOverlay(markers[i]);
    }

使用循环时，单击标记会破坏脚本。它指向

行

标记物[I] .openInfoWindowHtml（HTMLS [I]）;

并说该对象未定义。它还说i = 10在那一点上是“不可能”的结果。长度只有10

Answer 1

问题是classic function-in-a-loop。以下是修复它的两种典型方法之一：

function callback(i) {
    return function () {
        markers[i].openInfoWindowHtml(htmls[i]);
    };
}

for (i = 0; i < result.length; i++) {
    // snip...

    GEvent.addListener(markers[i], "click", callback(i));

    // snip...   
}

JSLint可以轻松捕捉这些常见错误。

修改

@Alex's answer大致显示了修复此问题的其他典型方法，但有一些错误。但这应该有用：

for (i = 0; i < result.length; i++) {
    // snip...

    GEvent.addListener(markers[i], "click", (function (i) {
        return function () {
            markers[i].openInfoWindowHtml(htmls[i]);
        }
    })(i));

    // snip...   
}

Answer 2

在这段代码中......

GEvent.addListener(markers[i], "click", function () {
        markers[i].openInfoWindowHtml(htmls[i]);
});

...该函数对父作用域中的i具有闭包。所以它正在访问变量本身，不是它的副本。

在循环结束时，当您的函数访问i变量时，它将等于停止循环的任何条件，在您的示例中为10。

您可以使用自调用匿名函数来修复它，该函数将值传递给寿命有限的新变量...

(function(j) {  
    GEvent.addListener(markers[j], "click", function () {
           markers[j].openInfoWindowHtml(htmls[j]);
    });
})(i);

Here is an example类似的代码工作。

javascript循环问题将GMarker添加到GMap

2 个答案:

修改