如何在google maps api中自定义单个标记簇的样式

时间:2015-07-28 07:08:41

标签: google-maps google-maps-api-3 markerclusterer

我正在使用JSON数据使用谷歌地图api v3绘制数百个标记。我使用了Markerclusterer并且它工作正常。默认情况下,Markerclusterer默认根据不同的缩放级别分配群集图标。我想要做的是根据json数组获得的数据的if条件自定义集群的各个样式。 我尝试了以下逻辑,但它改变了所有聚类的样式,而不是包含特定标记的特定聚类。

    if(redflag)
                    {
                      var mcOptions = {
                                gridSize: 50,
                                maxZoom: 15,
                                styles: [{
                                    height: 57,
                                    url: "../../css/images/m3.png",
                                    width: 57
                                }     
                                ]
                            };
                    }
                else
                    {
                     mcOptions = {
                            gridSize: 50,
                            maxZoom: 15,
                            styles: [{
                                height: 53,
                                url: "../../css/images/m1.png",
                                width: 53
                            }]
                        };
                    }
                 var mc = new MarkerClusterer(map, [], mcOptions);
                 mc.addMarkers(markerArray , true);

如何使用我自己的条件自定义单个集群,而不是使用markerclusterer对象进行默认索引。

编辑1: 我已修改代码以使用marker_和getClusters()方法跟踪标记,并成功更改了群集图标样式,但群集脱离了绑定,并且在缩小时不显示正确的图标更改。我已使用此链接animate cluster marker的帮助。

 var mc = new MarkerClusterer(map, [], mcOptions);
                 mc.addMarkers(markerArray , true);
 //attach listener to clusteringend-event
                 google.maps.event.addListener(mc,'clusteringend',function()             {

                 //iterate over all clusters
                 var clusters=this.getClusters();

                 for(var i = 0; i < clusters.length;++i)
                 {

                 if(clusters[i].markers_.length > 1)
                 {


                    var markers= clusters[i].markers_;

                    var flag=false;
                    for(var j=0;j<markers.length;++j)
                        {

                            if(markers[j].getAnimation()!= null)
                                {
                                alert("marker posotion"+markers[j].getPosition().toString());
                                flag=true;
                                }
                        }


                    if(flag)     
                       clusters[i].clusterIcon_.div_.firstChild.src='../../css/images/m3.png';

                   }
                 }
                 });

0 个答案:

没有答案