google-maps - 动画标记集群

Question

我正在将 Google Maps v3 与 MarkerClustererPlus 一起使用。 Click for docs

如果集群包含特定标记，我想为集群设置动画。如果标记不在集群内，则动画非常简单。

  marker.setAnimation(google.maps.Animation.BOUNCE);

但我想反弹整个集群图标。我可以通过以下方式获取集群:

  markerCluster.getClusters();

但是如何将 cluster-div 与我的 getClusters()-Array 相关联？我不知道哪个 div 属于 getClusters() 函数中的哪个集群。

Answer 1

这是不可能通过记录的方法/属性实现的，但您可以访问这些属性。

第 1 步:每个集群都有一个 markers_ -property，这是一个包含集群所有标记的数组。遍历所有集群并检查 markers _-array 包含想要的标记

第 2 步:找到带有所需标记的集群后，访问属性 clusterIcon_.div_集群，这是代表集群图标的元素

//attach listener to clusteringend-event
google.maps.event.addListener(markerClustererInstance,'clusteringend',function(){

//iterate over all clusters
var clusters=this.getClusters();
for(var i = 0; i < clusters.length;++i){

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

        // clusters[i].clusterIcon_.div_ is the HTMLElement
        // that contains the wanted clusterIcon,
        // you should at first reset here recently applied changes

        if(clusters[i].markers_.indexOf(wantedMarker)>-1){
          //the marker has been found, do something with it
        } 
  }
}});

但请注意:群集图标不是 google.maps.Marker ，您不能像使用原生标记那样简单地应用动画。此外:将修改集群图标位置的动画(例如反弹)可能会干扰markerClusterer，我建议使用可以通过颜色更改或背景图像更改(您的集群图标)应用的效果请参阅 div 的背景图像)。