点击Google PlayClusterer时,Google地图API API v3事件点击加注?

时间:2010-05-21 10:07:09

标签: javascript javascript-events google-maps-api-3 markerclusterer

我在使用Google Map API v3的网页上有map MarkerClusterer个对象。我有一个函数需要在我们点击地图时运行它注册为:

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

所以我的问题如下:当我点击一个MarkerClusterer集群而不是像标记一样,并且没有在地图上引发点击事件而只是从标记中引发一个它从地图调用点击。

为了测试这个,我已经从markerclusterer点击了一个警告:

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

因此,在map对象的click事件之后,clusterclick会上升。然后,我无法删除map对象的侦听器作为解决方案。有没有办法测试地图点击事件中是否有群集点击?或者是一种复制标记行为的方法,并且在调用clustererclick时不会引发map的click事件?谷歌和文档对我没有帮助。

THX

4 个答案:

答案 0 :(得分:5)

这是可行的,但我仍然愿意接受其他更好的答案。

我使用setTimeout来中继地图点击事件,这是javascript应该执行的最后一件事,并且如果之前引发了clustererclick,则使用布尔值进行检查:

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;
}); 

答案 1 :(得分:4)

我遇到了同样的问题和解决方案我最终得到了:

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();
    });
};

我讨厌这样做,但另一方面,“扩展”外部库是正常的吗?

答案 2 :(得分:2)

我找到了另一种可行的解决方案。在markerclusterer.js中找到以下代码:

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

并将其更改为:

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

根据谷歌的Martin Matysiak所说,这被称为事件传播,事件始终是&#34;起泡&#34;在DOM层次结构中。您可以使用[代码]来阻止这种情况发生。&#34;

请参阅:https://groups.google.com/forum/#!topic/google-maps-js-api-v3/PGeNrzv_SAs

答案 3 :(得分:0)

我使用此方法,受其他答案的启发,但没有复制粘贴库代码或更改库本身:

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();
    });
}