Google Map API V3イベントMarkerClustererをクリックすると、[上昇]をクリックしますか？

Question

私は持っています GoogleマップAPI V3 地図 使用するページ上のオブジェクト 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');
}); 

したがって、ClusterClickは、マップオブジェクトのクリックイベントの後に上昇します。その後、MAPオブジェクトのリスナーをソリューションとして削除することはできません。マップのクリックイベントでクラスタークリックがあるかどうかをテストする方法はありますか？または、マーカーの動作を再現し、ClustererClickが呼び出されたときにマップのクリックイベントを上げない方法は？グーグルとドキュメントは私を助けませんでした。

どうも

Answer 1

ここに機能するものがありますが、私はまだ他のより良い答えを受け入れています。

SettimeOutを使用してマップクリックイベントを中継して、JavaScriptを実行する最後のものです。

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

私は同じ問題を抱えていました、そして、私が終わった解決策は次のとおりです。

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

私はこれをするのは嫌いですが、一方では、外部ライブラリを「拡張」するのは普通ですか？

Answer 3

機能する可能性のある別のソリューションを見つけました。 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();
});

GoogleのMartin Matysiakによると、「これはイベント伝播と呼ばれ、イベントは常にDOM階層で「バブル」です。[そのコード]でこれが起こらないようにすることができます。」

見る： https://groups.google.com/forum/#!topic/google-maps-js-api-v3/pgenrzv_sas

Answer 4

他の回答に触発されたこの方法を使用しましたが、ライブラリコードをコピーしたり、ライブラリ自体を変更したりしませんでした。

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