javascript - 如何在分配给数组索引的对象上调用方法？

Question

为了在 Google map 内为标记创建信息窗口，我使用了一个数组在我的 for 循环内创建“一次性对象”。但是，我的方法似乎不起作用。单击标记没有任何作用，当我检查控制台时，我收到此错误消息:

Uncaught TypeError: Cannot call method 'open' of undefined 

当我没有将对象分配给数组索引时，单击任何创建的标记只会打开最后一个信息窗口(这意味着当对象被覆盖时，它会更新对先前对象的所有引用)。

我怎样才能避免这种情况？

markers = []
infowindows = []
counter = 0
for location in exports.response.locations
    myLatlng = new google.maps.LatLng(location.latitude, location.longitude);
    markers[counter] = new google.maps.Marker(
        position: myLatlng
        map: map
        title: location.name
    )
    contentString = '<div id="info_content_' + location.id + '">' + '<h3>' + location.name + '</h3>' + '<ul>' + '<li>' + location.address + ', ' + location.city + '</li>' + '</ul>'
    infowindows[counter] = new google.maps.InfoWindow(content: contentString)

    google.maps.event.addListener markers[counter], "click", ->
        infowindows[counter].open(map, markers[counter])

    counter++

注意

问题区域是上面代码中的倒数第三行。 (infowindows[counter].open(map, markers[counter]))

回答

几乎每个对这个问题的回复都帮助我找到了解决方法，但是-为了记录(以及以后准备这个的任何人)我用 foreach 解决了它:

markers = []
infowindows = []
exports.response.locations.forEach (location) ->
    myLatlng = new google.maps.LatLng(location.latitude, location.longitude);
    markers[location.id] = new google.maps.Marker(
        position: myLatlng
        map: map
        title: location.name
    )
    contentString = '<div id="info_content_' + location.id + '">' + '<h3>' + location.name + '</h3>' + '<ul>' + '<li>' + location.address + ', ' + location.city + '</li>' + '</ul>'
    infowindows[location.id] = new google.maps.InfoWindow(content: contentString)

    google.maps.event.addListener markers[location.id], "click", ->
        infowindows[location.id].open(map, markers[location.id])

Answer 1

我认为你的问题是 counter 将不再有有效索引:

for location in exports.response.locations

    google.maps.event.addListener markers[counter], "click", ->
        infowindows[counter].open(map, markers[counter])

    counter++

counter 在 onClick 处理程序闭包中被捕获。

在 onClick 处理程序运行之前，它将超出范围递增。

所有这些处理程序最终都将使用相同的 counter 值。