Animate cluster of markerclusterer

问题

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.

回答1:

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).

来源：https://stackoverflow.com/questions/18452205/animate-cluster-of-markerclusterer

标签

google-maps

google-maps-api-3

markerclusterer