为什么我的谷歌地图事件监听器不能正常工作？答案

【问题标题】：why are my google maps event listeners not working properly?为什么我的谷歌地图事件监听器不能正常工作？
【发布时间】：2015-08-13 08:44:47
【问题描述】：

我正在尝试为每个标记（有 30 个标记）处理鼠标悬停在侦听器上，并为这些标记显示信息窗口。我为每个标记创建了侦听器，但是当我的鼠标悬停在某个标记上时，它总是显示最后一个标记的信息窗口。总而言之，我听不到其他标记。任何帮助，将不胜感激。在此先感谢我的代码：

var listeners = [];
for(var i = 0; i < markers.length; i++){
  var marker = markers[i];
  var contentString = contents[i];
  listeners[i] = new google.maps.event.addListener(marker, 'mouseover', function() {
    var hideInfoWindows = function(){
        for (var j = 0; j < util.Common.infowindows.length; j++) {
          util.Common.infowindows[j].close(); 
        }
    }
    var addInfoWindow = function(){
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        //hideInfoWindows();
        util.Common.infowindows.push(infowindow);
        infowindow.open(util.Common.googlemap,marker);
    }
    addInfoWindow();
  });
}

我也在使用js cluster library，但我认为问题与它无关。

【问题讨论】：

标签： javascript google-maps markerclusterer sapui5

【解决方案1】：

我认为您的问题可能是您没有在循环内使用闭包，并且当触发事件侦听器时，marker 和 contentString 变量指向最后一个标记。

尝试像这样重写循环：

var listeners = [];
for(var i = 0; i < markers.length; i++){
    (function(index){ //create a closure, variable 'index' will take its value from variable i, but won't be affected by changed i in the outer scope
        var marker = markers[index]; //use this scope's index variable instead of i
        var contentString = contents[index]; //use this scope's index variable instead of i
        listeners[index] = new google.maps.event.addListener(marker, 'mouseover', function() {
            var hideInfoWindows = function(){
                for (var j = 0; j < util.Common.infowindows.length; j++) {
                    util.Common.infowindows[j].close();
                }
            };
            var addInfoWindow = function(){
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                //hideInfoWindows();
                util.Common.infowindows.push(infowindow);
                infowindow.open(util.Common.googlemap,marker);
            };
            addInfoWindow();
        });
    })(i);
}

【讨论】：