3

我正在将网页上的地图与 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 个标记）。我错过了什么。

4

1 回答 1

3

每次添加标记时都添加相同的侦听器（请注意，侦听器不会覆盖以前添加的侦听器）。

添加 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/

于 2014-09-09T17:55:19.660 回答