Angularjs 角度谷歌地图多标记聚类器

我从未见过任何例子谈论如何在Angularjs谷歌地图中使用多个Markerclusterer

我为我的代码创建了一个plunker：

模板如下所示：

<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正常工作

您应该为clusterer设置

doCluster=“true”

，以便根据需要在您的plunkr上实际创建群集，它指向库的2.0.x版本：

angular.module（'appMaps'，['uiGmapgoogle-maps']））
.controller（'mainCtrl'，函数（$scope）{
$scope.map={
中心：{
纬度：40.1451，
经度：-99.6680
},
缩放：4，
界限：{}
};
$scope.options={
mapTypeControl:true，
scaleControl：对，
街景控制：正确
};
var createRandomMarker=函数（i，边界，idKey）{
var lat_min=bounds.southwest.latitude，
纬度范围=边界东北纬度-纬度最小值，
lng_min=bounds.soutwest.longitude，
lng_范围=bounds.northeast.longitude-lng_min；
if（idKey==null）{
idKey=“id”；
}
var纬度=纬度最小值+（Math.random（）*纬度范围）；
var经度=lng_min+（数学随机（）*lng_范围）；
变量ret={
纬度：纬度，
经度：经度，
标题：m'+i
};
ret[idKey]=i；
返回ret；
};
$scope.randomMarkers=[]；
$scope.randomMarkers1=[]；
//加载地图后，从地图中获取边界
$scope.$watch（函数（）{
返回$scope.map.bounds；
}，功能（nv，ov）{
//只需要再生一次
如果（！西南偏南和西南偏南）{
var标记=[]；
对于（变量i=0；i<5；i++）{
markers.push（createRandomMarker（i$scope.map.bounds））
}
$scope.randomMarkers=标记；
var markers1=[]；
对于（变量i=0；i<50；i++）{
markers1.push（createRandomMarker（i$scope.map.bounds））
}
$scope.randomMarkers1=markers1；
}
}，对）；
});
html，主体，#映射#画布{
身高：100%；
宽度：100%；
边际：0px；
}
#地图画布{
位置：相对位置；
}
.google地图容器{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}

作为
类型
参数，已在
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>

html，主体，#映射#画布{
身高：100%；
宽度：100%；
边际：0px；
}
#地图画布{
位置：相对位置；
}
.google地图容器{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}

我以为doCluster已经被弃用了。看到这个了吗？我现在添加了关于这个的注释：）