javascript事件函數被多次調用

Question

我正在谷歌地圖上的重疊標記蜘蛛俠的網頁上整合地圖。 我在標記上添加了一個點擊監聽器，如下所示。

$scope.setMarkers = function() {
    for (var i = 0; i < $scope.markers.length; i++) {
        $scope.markers[i].setMap($scope.map);
        $scope.oms.addMarker($scope.markers[i]);
        var marker = $scope.markers[i];
        var iw = new google.maps.InfoWindow({
            content: ""
        });
        $scope.oms.addListener('click', function(marker) {
            iw.setContent(marker.desc);
            iw.open($scope.map, marker);
        });
    }
};

它工作正常，但jshint給我錯誤的內部循環功能。 所以我把它改成了。

$scope.setMarkers = function() {
    for (var i = 0; i < $scope.markers.length; i++) {
        $scope.markers[i].setMap($scope.map);
        $scope.oms.addMarker($scope.markers[i]);
        $scope.addMarkerEventListener(i);
    }
};
$scope.addMarkerEventListener = function(i) {
    var marker = $scope.markers[i];
    var iw = new google.maps.InfoWindow({
        content: ""
    });
    $scope.oms.addListener('click', function(marker) {
        iw.setContent(marker.desc);
        iw.open($scope.map, marker);
    });
};

現在，當我點擊標記時，它一個接一個地打開90個信息窗口（我有一個數組中的90個標記）。 我錯過了什么。

Answer 1

每次添加標記時都添加相同的偵聽器（請注意，偵聽器不會覆蓋以前添加的偵聽器）。

添加1個偵聽器並使用1個InfoWindow就足夠了（除了你想要同時打開多個InfoWindow）。

您的第一次嘗試按預期工作，因為您在循環內覆蓋了iw 。

可能的方法：

//create a single InfoWindow-instance
$scope.iw = new google.maps.InfoWindow();

//add a single click-listener
$scope.oms.addListener('click', function (marker) {
    $scope.iw.close();
    $scope.iw.setContent(marker.desc);
    $scope.iw.open($scope.map, marker);       
});

//the loop
for (var i = 0; i < $scope.markers.length; ++i) {
    $scope.markers[i].setMap($scope.map);
    $scope.oms.addMarker($scope.markers[i]);
}

演示： http ： //jsfiddle.net/doktormolle/qoko4425/