动画markerclusterer的集群 [英] Animate cluster of markerclusterer

问题描述

我正在使用带有MarkerClustererPlus的Google Maps v3。 Click for docs

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

  marker.setAnimation（google.maps.Animation.BOUNCE）; 
  

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

  markerCluster.getClusters（）; 
  

但我如何将cluster-div与我的getClusters（） - 数组关联？我不知道哪个div属于getClusters（）函数中的哪个簇。

解决方案

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

• 步骤＃1：有一个标记_ -property，它是一个包含集群所有标记的数组。迭代所有集群并检查标记 _-数组是否包含想要的标记




• 步骤＃2：当您找到具有所需标记的群集时，请访问群集的属性 clusterIcon_.div _ ，这是表示群集的元素-icon

    //将侦听器附加到clusteringend-event 
   google.maps.event.addListener（markerClustererInstance，'clusteringend '，函数（）{
   
   //遍历所有集群
   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_是包含想要的clusterIcon，
  的HTMLElement 
   //您应该首先在此重置最近应用的更改
   
   if（clusters [i] .markers_.indexOf（wantedMarker）> -1）{
   // t他已经找到标记，用它做一些事情
  } 
  } 
  }}）; 
    

  但注意：群集图标不是 google.maps.Marker ，您不能简单地应用动画，因为您可以使用原生标记进行动画制作。此外：修改集群图标位置（例如反弹）的动画可能会干扰markerClusterer，我会建议使用可以通过颜色更改或背景图像更改应用的效果（集群图标请参阅div的背景图片。）

I am using Google Maps v3 with MarkerClustererPlus. Click for docs

I want to animate a cluster if a cluster contains a specific marker. The animation is quite easy if the marker is not inside a cluster.

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

But i want to bounce the whole cluster-icon. I can get the cluster with:

  markerCluster.getClusters();

But how can i associate the cluster-div with my getClusters()-Array? I dont know which div belongs to which cluster from the getClusters()-function.

解决方案

This is not possible via the documented methods/properties, but you may get access to these properties.

• Step #1: Each cluster has a markers_ -property, which is an array that contains all the markers of the cluster. Iterate over all clusters and check if the markers_-array contains the wanted marker

• Step #2: when you've found the cluster with the wanted marker, access the property clusterIcon_.div_ of the cluster, that's the element that represents the cluster-icon

  //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
          } 
    }
  }});
  

  But Note: The cluster-icon is not a google.maps.Marker, you can't simply apply an animation as you may do it with a native marker. Furthermore: Animations that will modify the position of the cluster-icon (e.g. bounce) may interfere with the markerClusterer, I would suggest to use effects that can be applied via color-changes or changes of the background-image(the cluster-icons you see are the background-images of the div).

这篇关于动画markerclusterer的集群的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！