javascript 이벤트 함수가 여러 번 호출되었습니다.

Question

Google지도에서 Overlapping Marker Spiderfier로 웹 페이지의지도를 통합하려고합니다. 다음과 같이 마커에 클릭 리스너를 추가했습니다.

$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/