javascript - 动态在Google Maps上设置事件不起作用

我正在使用数据库来获取不同的位置，这些位置将在Google地图上设置为标记。我正在使用JavaScript来为所有这些动态加载的标记设置事件侦听器，但是我对此有一个疑问：

var markerCollection = [];

//pushing data into the array...

for ( var j = 0; j < markerCollection.length; j++) {
    console.log(j + ' ' + markerCollection[j].shopId);
    $.proxy(google.maps.event.addListener(markerCollection[j].gmapMarker, "click", function(e) {
        console.log(markerCollection[j].shopId);
    }),this);
}

该代码告诉我markerCollection[j]是未定义的。但是，如果我输入一种硬编码方式（markerCollection [0]），它将起作用。为什么会发生这种情况，我该如何解决？

最佳答案

注释之一中链接的答案中的代码比需要的复杂。有一种更简单的方法可以更容易理解：

var markerCollection = [];

        //pushing data into the array...

for ( var j = 0; j < markerCollection.length; j++) {
    addMarker( markerCollection[j] );
}

function addMarker( marker ) {
    console.log( marker.shopId );
    google.maps.event.addListener( marker.gmapMarker, "click", function(e) {
        console.log( marker.shopId );
    });
}

这就是您真正需要的。每次调用addMarker()函数时，对该函数的调用都有其自己的marker变量，该变量引用markerCollection数组中的元素之一。并且marker变量在以后响应单击而调用侦听器回调时仍然有效。

它的作用与更复杂的版本相同，但我认为它更容易理解。注意addMarker中的代码如何使用marker变量，而不必每次都说markerCollection[i]。

另外，除非需要传递$.proxy()值，否则不需要this位，在此不使用该值。因此，如果您不需要它，请忽略它。越简单越好！