javascript - guide - marker group leaflet

markerClusterer en click zoom

Question

Acabo de agregar un MarkerClusterer a mi mapa de Google. Funciona perfectamente bien.

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

Answer 1

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

Answer 2

Parece que la API solo te permitirá alternar la funcionalidad de zoom

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

Así que tendrá que editar la fuente, 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());
}
};

Answer 3

Puede hacer esto sin modificar el código fuente usando un detector en el evento clusterclick markerClusterer:

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 del zoom del mapa para controlar la cantidad de zoom y la ubicación del zoom con cada clic.

Answer 4

Se ha actualizado el código fuente de MarkerClusterer, que permite un acceso mucho más fácil al evento de clic:

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

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

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

Lo uso para cambiar a un tipo de mapa diferente, ya que uso un conjunto de mosaicos personalizados para una descripción más sencilla de los niveles de zoom más bajos:

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

Answer 5

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

Este código de verificación es zoom al hacer clic se establece. Si es acercar el zoom al zoom máximo más uno, y centrarlo en el grupo. Código muy simple.