API Google map événement v3 cliquez Relancez lorsque clickingMarkerClusterer?

Question

Je API Google Map v3 carte objet sur une page qui utilise MarkerClusterer . J'ai une fonction qui ont besoin d'exécuter lorsque l'on clique sur la carte pour elle est enregistrée comme:

google.maps.event.addListener(map, 'click', function (event) {
    CallMe(event.latLng);
});

Donc mon problème est le suivant:. Lorsque je clique sur un groupe de MarkerClusterer au lieu de se comporter comme un marqueur et non Déclenchez l'événement de clic sur la carte, mais seulement celui du marqueur qu'il appelle le clic sur la carte

Pour tester cela, j'ai généré une alerte de l'cliquez MarkerClusterer:

google.maps.event.addListener(markerClusterer, "clusterclick", function (cluster) {
    alert('MarkerClusterer click event');
}); 

Ainsi, le clusterclick augmente après l'événement click de l'objet de la carte. Je ne peux donc pas retirer l'auditeur de l'objet de la carte comme une solution. Est-il possible de tester s'il y avait un clic Clusterer en cas de clic sur la carte? Ou un moyen de reproduire le comportement de marqueur et ne soulève pas l'événement click de carte lorsque clustererclick est appelé? Google et la documentation ne m'a pas aidé.

Thx

Answer 1

Voici quelque chose qui fonctionne, mais je suis toujours ouvert à d'autres meilleures réponses.

J'utilise un setTimeout pour relayer l'événement click carte pour la dernière javascript chose doit exécuter et vérifier avec un booléen si clustererclick a été soulevée devant quelque chose comme ceci:

google.maps.event.addListener(map, 'click', function (event) {
    setTimeout(function () {
        if (!clusterClicked) {
            CallMe(event.latLng);
            alert('Map click executed');
        }
        else {
            clusterClicked = false;
            alert('ClusterClicked map click not executed');
        }
    }, 0);
});

google.maps.event.addListener(markerClusterer, "clusterclick", function (cluster) {
    clusterClicked = true;
}); 

Answer 2

J'ai eu mêmes problèmes et la solution i fini avec:

ClusterIcon.prototype.onAdd = function() {
    this.div_ = document.createElement('DIV');
    if (this.visible_) {
        var pos = this.getPosFromLatLng_(this.center_);
        this.div_.style.cssText = this.createCss(pos);
        this.div_.innerHTML = this.sums_.text;
    }

    var panes = this.getPanes();
    panes.overlayMouseTarget.appendChild(this.div_);

    var that = this;
    google.maps.event.addDomListener(this.div_, 'click', function(e) {
        =======> e.stopImmediatePropagation(); //<====================
        that.triggerClusterClick();
    });
};

Je déteste faire cela, mais dans d'autre part, il est normal d ' « étendre » les bibliothèques externes?

Answer 3

J'ai trouvé une autre solution qui peut fonctionner. Trouvez les markerclusterer.js à l'intérieur de code suivant:

google.maps.event.addDomListener(this.div_, 'click', function() {
  that.triggerClusterClick();
});

et le modifier à:

google.maps.event.addDomListener(this.div_, 'click', function(ev) {
  ev.cancelBubble = true;
  if (ev.stopPropagation) {
    ev.stopPropagation();
  }
  that.triggerClusterClick();
});

Selon Martin Matysiak de Google « ce que l'on appelle de la propagation des événements, l'événement toujours « bulles » dans le code de la hiérarchie DOM. Vous pouvez empêcher que cela se passe avec [que]. »

Voir: https: // groupes. google.com/forum/#!topic/google-maps-js-api-v3/PGeNrzv_SAs

Answer 4

J'utilisé cette méthode, inspirée par les autres réponses, mais sans code de la bibliothèque-coller copie ou changer la bibliothèque elle-même:

originalOnAdd = ClusterIcon.prototype.onAdd;
ClusterIcon.prototype.onAdd = function() {
    originalOnAdd.call(this);

    google.maps.event.addDomListener(this.div_, 'click', function (ev) {
        ev.cancelBubble = true;
        if (ev.stopPropagation)
            ev.stopPropagation();
    });
}