web-dev-qa-db-fra.com

markerClusterer sur clic zoom

Je viens d'ajouter un MarkerClusterer à ma carte Google. Cela fonctionne parfaitement bien.

Je me demande simplement s'il existe un moyen d'ajuster le comportement de zoom avant lorsque le cluster est cliqué. J'aimerais changer le niveau de zoom si possible.

Y a-t-il un moyen d'y parvenir?

Merci

javascriptgoogle-mapszoomgoogle-maps-markersmarkerclusterer
26
AlexBrand

J'ai modifié l'événement clusterclick comme suggéré:

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

 }
};

Ça marche super! Merci beaucoup

8
AlexBrand

Il y a eu une mise à jour du code source de MarkerClusterer, permettant un accès beaucoup plus facile à l'événement click:

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

où 'markerCluster' est l'objet MarkerCluster. Dans la fonction, vous pouvez également accéder

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

J'utilise ceci pour passer à un autre type de carte, car j'utilise un ensemble de tuiles personnalisé pour une vue d'ensemble plus facile sur les niveaux de zoom inférieurs:

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)

Cordialement Jack

54
Jack

Vous pouvez le faire sans modifier le code source en utilisant un écouteur sur l'événement 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(markerClusterer.getCenter());
    map.setZoom(map.getZoom()+1);
});

c'est à dire. J'ai défini zoomOnClick = false pour avoir un contrôle plus fin du comportement de zoom de la carte afin de contrôler la quantité de zoom et l'emplacement du zoom à chaque déclic.

8
Natacha Beaugeais

Il semble que l'API vous permette uniquement d'activer la fonctionnalité de zoom

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

Vous devrez donc éditer la source, elle semble être sur la ligne 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());
  }
};
3
Galen

Si quelqu'un a besoin d'écrire cette fonction en coffeescript, j'ai fusionné la première réponse et la réponse marquée en un seul extrait de code.

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

Cette vérification de code est un zoom sur le clic est défini. S'il s'agit d'un zoom avant pour un zoom maximum plus un, et centrez sur le cluster. Code très simple.

0
Whitecat