Angular Google 映射多个 MarkerClusterer

Question

我从未见过任何例子讨论如何在 Angularjs google 地图中使用多个 MarkerClusterer。

我为我的代码创建了一个插件：

http://plnkr.co/edit/TlkZ18IMbWKxI8pdgwko?p=preview

模板如下所示：

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
    <ui-gmap-markers models="randomMarkers" coords="'self'" type="cluster" icon="'icon'" >
    </ui-gmap-markers>
    <ui-gmap-markers models="randomMarkers1" coords="'self'" type="cluster" typeOptions='{"title":"Hi I am a Cluster!","gridSize":20,"ignoreHidden":true,"minimumClusterSize":2}' icon="'icon'">
    </ui-gmap-markers>

我在使 markercluster 工作时遇到问题

Answer 1

您应该为集群器设置 doCluster="true" 以根据需要在您的 plunkr 上实际创建集群，它指向库的版本 2。0.x：

angular.module('appMaps', ['uiGmapgoogle-maps'])
  .controller('mainCtrl', function($scope) {
    $scope.map = {
      center: {
        latitude: 40.1451,
        longitude: -99.6680
      },
      zoom: 4,
      bounds: {}
    };
    $scope.options = {
      mapTypeControl: true,
            scaleControl: true,
            streetViewControl: true
    };

    var createRandomMarker = function(i, bounds, idKey) {
      var lat_min = bounds.southwest.latitude,
        lat_range = bounds.northeast.latitude - lat_min,
        lng_min = bounds.southwest.longitude,
        lng_range = bounds.northeast.longitude - lng_min;

      if (idKey == null) {
        idKey = "id";
      }

      var latitude = lat_min + (Math.random() * lat_range);
      var longitude = lng_min + (Math.random() * lng_range);
      var ret = {
        latitude: latitude,
        longitude: longitude,
        title: 'm' + i
      };
      ret[idKey] = i;
      return ret;
    };
    $scope.randomMarkers = [];
    $scope.randomMarkers1 = [];
    // Get the bounds from the map once it's loaded
    $scope.$watch(function() {
      return $scope.map.bounds;
    }, function(nv, ov) {
      // Only need to regenerate once
      if (!ov.southwest && nv.southwest) {
        var markers = [];
        for (var i = 0; i < 5; i++) {
          markers.push(createRandomMarker(i, $scope.map.bounds))
        }
        $scope.randomMarkers = markers;
        var markers1 = [];
        for (var i = 0; i < 50; i++) {
          markers1.push(createRandomMarker(i, $scope.map.bounds))
        }
        $scope.randomMarkers1 = markers1;
      }
    }, true);
  });

        html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
        }

        #map_canvas {
            position: relative;
        }

        .angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>

<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">


<body>
    <div id="map_canvas" ng-controller="mainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
        <ui-gmap-markers models="randomMarkers" coords="'self'" doCluster="true" icon="'icon'" >
        </ui-gmap-markers>
        <ui-gmap-markers models="randomMarkers1" coords="'self'" doCluster="true" typeOptions='{"title":"Hi I am a Cluster!","gridSize":20,"ignoreHidden":true,"minimumClusterSize":2}' icon="'icon'">
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>
<!--example-->
</body>

</html>

在当前版本 2.2.1 上 doCluster="true" 仍然可以正常工作 type="'cluster'" 因为它仍在检查两者：

https://github.com/angular-ui/angular-google-maps/blob/master/dist/angular-google-maps.js#L4982

请注意，您必须设置 type="'cluster'" 而不是 type="cluster"，因为它对其进行严格等号 (===) 并期望它是一个字符串。

Answer 2

As documentation says type 参数已在 2.1.6 版本中引入。它解释了为什么 type="cluster" 在您的案例中没有按预期工作，因为引用了 2.0.X 库：

<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>

所以，对于 2.0.X 使用 doCluster 参数：

angular.module('appMaps', ['uiGmapgoogle-maps'])
  .controller('mainCtrl', function ($scope) {
      $scope.map = {
          center: {
              latitude: 40.1451,
              longitude: -99.6680
          },
          zoom: 4,
          bounds: {}
      };
      $scope.options = {
          mapTypeControl: true,
          scaleControl: true,
          streetViewControl: true
      };

      var createRandomMarker = function (i, bounds, idKey) {
          var lat_min = bounds.southwest.latitude,
            lat_range = bounds.northeast.latitude - lat_min,
            lng_min = bounds.southwest.longitude,
            lng_range = bounds.northeast.longitude - lng_min;

          if (idKey == null) {
              idKey = "id";
          }

          var latitude = lat_min + (Math.random() * lat_range);
          var longitude = lng_min + (Math.random() * lng_range);
          var ret = {
              latitude: latitude,
              longitude: longitude,
              title: 'm' + i
          };
          ret[idKey] = i;
          return ret;
      };
      $scope.randomMarkers = [];
      // Get the bounds from the map once it's loaded
      $scope.$watch(function () {
          return $scope.map.bounds;
      }, function (nv, ov) {
          // Only need to regenerate once
          if (!ov.southwest && nv.southwest) {
              var markers = [];
              for (var i = 0; i < 64; i++) {
                  markers.push(createRandomMarker(i, $scope.map.bounds))
              }
              $scope.randomMarkers = markers;
          }
      }, true);
  });

html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
        }

#map_canvas {
            position: relative;
}

.angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
 <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script> 

<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
            <ui-gmap-markers models="randomMarkers" coords="'self'" doCluster="true" typeoptions='{"title":"","gridSize":20,"ignoreHidden":true,"minimumClusterSize":2}' icon="'icon'">
            </ui-gmap-markers>
        </ui-gmap-google-map>
</div>

对于2.1.X或以上使用type参数：

angular.module('appMaps', ['uiGmapgoogle-maps'])
  .controller('mainCtrl', function ($scope) {
      $scope.map = {
          center: {
              latitude: 40.1451,
              longitude: -99.6680
          },
          zoom: 4,
          bounds: {}
      };
      $scope.options = {
          mapTypeControl: true,
          scaleControl: true,
          streetViewControl: true
      };

      var createRandomMarker = function (i, bounds, idKey) {
          var lat_min = bounds.southwest.latitude,
            lat_range = bounds.northeast.latitude - lat_min,
            lng_min = bounds.southwest.longitude,
            lng_range = bounds.northeast.longitude - lng_min;

          if (idKey == null) {
              idKey = "id";
          }

          var latitude = lat_min + (Math.random() * lat_range);
          var longitude = lng_min + (Math.random() * lng_range);
          var ret = {
              latitude: latitude,
              longitude: longitude,
              title: 'm' + i
          };
          ret[idKey] = i;
          return ret;
      };
      $scope.randomMarkers = [];
      // Get the bounds from the map once it's loaded
      $scope.$watch(function () {
          return $scope.map.bounds;
      }, function (nv, ov) {
          // Only need to regenerate once
          if (!ov.southwest && nv.southwest) {
              var markers = [];
              for (var i = 0; i < 64; i++) {
                  markers.push(createRandomMarker(i, $scope.map.bounds))
              }
              $scope.randomMarkers = markers;
          }
      }, true);
  });

html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
        }

#map_canvas {
            position: relative;
}

.angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
}

 <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
 <script src="http://rawgit.com/angular-ui/angular-google-maps/2.1.X/dist/angular-google-maps.js"></script> 

<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
            <ui-gmap-markers models="randomMarkers" coords="'self'" type="'cluster'" typeoptions='{"title":"","gridSize":20,"ignoreHidden":true,"minimumClusterSize":2}' icon="'icon'">
            </ui-gmap-markers>
        </ui-gmap-google-map>
</div>

Angular Google 映射多个 MarkerClusterer

Angular Google Map multiple MarkerClusterers

google-maps

angularjs

angular-google-maps