18

Acabo de añadir un MarkerClusterer a mi mapa de google. Funciona perfectamente bien.markerClusterer al hacer clic en el zoom

Me pregunto si hay alguna forma de ajustar el comportamiento de acercamiento cuando se hace clic en el clúster. Me gustaría cambiar el nivel de zoom si es posible.

¿Hay alguna manera de lograr esto?

Gracias

Respuesta

6

Modifiqué el evento clusterclick como se sugiere:

/** 
* Triggers the clusterclick event and zoom's if the option is set. 
*/ 
ClusterIcon.prototype.triggerClusterClick = function() { 
var markerClusterer = this.cluster_.getMarkerClusterer(); 

// Trigger the clusterclick event. 
google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_); 

if (markerClusterer.isZoomOnClick()) { 
// Zoom into the cluster. 
// this.map_.fitBounds(this.cluster_.getBounds()); 

// modified zoom in function 
this.map_.setZoom(markerClusterer.getMaxZoom()+1); 

} 
}; 

Funciona muy bien! Muchas gracias

+0

¿Qué diferencias hay entre los códigos anteriores y los originales? – Kabkee

+0

@Kabkee la diferencia es que esto realmente cambia el zoom y el código anterior es un esqueleto. – Whitecat

3

Parece que la API sólo le permiten cambiar la funcionalidad de zoom

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

Por lo que tendrá que editar la fuente, que parece estar en la línea 1055

/** 
* Triggers the clusterclick event and zoom's if the option is set. 
*/ 
ClusterIcon.prototype.triggerClusterClick = function() { 
    var markerClusterer = this.cluster_.getMarkerClusterer(); 

    // Trigger the clusterclick event. 
    google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_); 

    if (markerClusterer.isZoomOnClick()) { 
    // Zoom into the cluster. 
    this.map_.fitBounds(this.cluster_.getBounds()); 
    } 
}; 
45

Ha habido una actualización del código fuente MarkerClusterer, que permite un acceso más fácil al evento click:

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
    // your code here 
}); 

donde 'markerCluster' ist el objeto MarkerCluster. Dentro de la función, también puede acceder

cluster.getCenter(); 
cluster.getMarkers(); 
cluster.getSize(); 

Lo utilizo para cambiar a un tipo de mapa diferente, como yo uso un conjunto de azulejos de diseño para la visión general más fácil en los niveles de zoom inferiores:

map.setCenter(cluster.getCenter()); // zoom to the cluster center 
map.setMapTypeId(google.maps.MapTypeId.ROADMAP); // switch map type 
map.setOptions(myMapOptions); // apply some other map options (optional) 

Saludos Jack

+2

¿Está esto documentado en algún lugar? – blacklwhite

+0

Está documentado aquí: https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/docs/reference.html –

5

Usted puede hacer esto sin modificar el código fuente mediante el uso de un oyente en el clusterclick markerClusterer evento:

var mcOptions = {gridSize: 40, maxZoom: 16, zoomOnClick: false, minimumClusterSize: 2}; 
markerClusterer = new MarkerClusterer(map, markers, mcOptions); 

google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster){ 
    map.setCenter(cluster.getCenter()); 
    map.setZoom(map.getZoom()+1); 
}); 

es decir. Configuré zoomOnClick = false para tener un control más preciso del comportamiento de zoom del mapa para controlar la cantidad de zoom y la ubicación del zoom que cada clic activa.

1

Si alguien necesita escribir esta función en coffeescript, fusioné la respuesta principal y la respuesta marcada en un fragmento de código.

mcOptions = 
    maxZoom: 16 

markerCluster = new MarkerClusterer map, markers, mcOptions 
# listener if a cluster is clicked 
google.maps.event.addListener markerCluster, "clusterclick", (cluster) -> 
    if markerCluster.isZoomOnClick() # default is true 
    #get bounds of cluster 
    map.fitBounds cluster.getBounds() 
    #zoom in to max zoom plus one. 
    map.setZoom markerCluster.getMaxZoom() + 1 

Esta comprobación del código es hacer clic en el zoom se establece. Si se trata de hacer zoom para maximizar el zoom más uno, y centrar en el clúster. Código muy simple

Cuestiones relacionadas