getClusters（）总是返回一个空数组（使用MarkerClustererPlus for Google Maps V3）

Question

我有以下代码加载地图并聚集标记：

$scope.getMapHistory = function(locations){

    var map = new google.maps.Map(document.getElementById('map-canvas-history'), {
      zoom: 17,
      center: google.maps.LatLng(0, 0)
    });

    var markers = [];
    locations.forEach(function(deviceLocation){
      //var dataPhoto = data.photos[i];
      var devLat = deviceLocation._source.data.location[1];
      var devLng = deviceLocation._source.data.location[0];
      var latLng = new google.maps.LatLng(devLat, devLng);
      var marker = new google.maps.Marker({position: latLng });
      markers.push(marker);
    });

    var markerCluster = new MarkerClusterer(map, markers);

    //Test to get the clusters
    console.log(markerCluster);
    console.log(markerCluster.getClusters());
    console.log(markerCluster.getTotalClusters());

    markerCluster.fitMapToMarkers();

    $scope.hideLoading('loadingMap'); //Hides the loading gif

}

直到那里一切都好。问题是我想访问群集数组，当我尝试记录markerCluster.getClusters()的返回时，它返回一个空数组。此外，.getTotalClusters()返回0。

然而，当我记录整个markerCluster并在控制台上打开它时，我可以看到clusters_ array：

标记聚类工作正常，但我无法访问群集数组和群集数量。有人知道可能会发生什么吗？ （如果我的解释不够充分，我可以提供更多细节）

Answer 1

在MarkerClusterer实例完成对标记的分区之前，好像你要求群集和总簇数一样，这很快但不是真正的瞬间。

一个简单的测试是在查询属性之前留下几秒钟：

var markerCluster = new MarkerClusterer(map, markers);

window.SetTimeout(function() {
    //Test to get the clusters
    console.log(markerCluster);
    console.log(markerCluster.getClusters());
    console.log(markerCluster.getTotalClusters());
},2000);

顺便说一句，您看到实例包含标记，因为控制台中的对象是对原始对象的引用，这意味着它在您检查它时会保留标记，但不一定在您记录它时。

Answer 2

由于MarkerCluster在加载地图之前未完全初始化，因此您获得了0个集群。以下示例显示了加载地图后如何确定群集数量：

google.maps.event.addListener($scope.map, 'idle', function(){           
   $scope.numOfClusters = markerCluster.getTotalClusters();
});

这是一个有效的例子：

＆＃13;

＆＃13;

angular.module('mapApp', [])

    .controller('mapCtrl', function ($scope) {
        $scope.locations = [
            { Id: 1, name: 'Oslo', lat: 59.923043, lng: 10.752839 },
            { Id: 2, name: 'Stockholm', lat: 59.339025, lng: 18.065818 },
            { Id: 3, name: 'Copenhagen', lat: 55.675507, lng: 12.574227 },
            { Id: 4, name: 'Berlin', lat: 52.521248, lng: 13.399038 },
            { Id: 5, name: 'Paris', lat: 48.856127, lng: 2.346525 }
        ];

        $scope.initMap = function () {
            $scope.map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 59.339025, lng: 18.065818 },
                zoom: 3
            });

            //init marker cluster
            var markers = [];
            for (var i = 0; i < $scope.locations.length; i++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng($scope.locations[i].lat, $scope.locations[i].lng),
                });
                markers.push(marker);
            }
            var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
            markerCluster = new MarkerClusterer($scope.map, markers, mcOptions);

            google.maps.event.addListener($scope.map, 'idle', function(){
                $scope.$apply(function(){
                  $scope.numOfClusters = markerCluster.getTotalClusters();
                });
            });

        };

        $scope.initMap();
    });

＆＃13;

html, body {
    height: 400px;
    margin: 0;
    padding: 0;
}

#map {
    height: 400px;
} 

＆＃13;

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
        <h2>The number of clusters:{{numOfClusters}}</h2>
        <div id="map"></div>
</div>

＆＃13;

＆＃13;

＆＃13;