انقر فوق حدث Google Map API v3 عند النقر فوق MarkerClusterer؟

Question

انا املك واجهة برمجة تطبيقات خرائط جوجل v3 خريطة كائن على الصفحة التي تستخدم MarkerClusterer.لدي وظيفة يجب تشغيلها عندما ننقر على الخريطة ليتم تسجيلها على النحو التالي:

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

لذلك مشكلتي هي كما يلي:عندما أقوم بالنقر فوق مجموعة من MarkerClusterer بدلاً من التصرف مثل العلامة وعدم رفع حدث النقر على الخريطة ولكن فقط الحدث من العلامة فإنه يستدعي النقر من الخريطة.

لاختبار ذلك، قمت بإنشاء تنبيه من نقرة علامة التحديد:

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

لذا فإن النقر العنقودي يرتفع بعد حدث النقر لكائن الخريطة.لا يمكنني بعد ذلك إزالة مستمع كائن الخريطة كحل.هل هناك أي طريقة لاختبار ما إذا كانت هناك نقرة عنقودية في حدث النقر على الخريطة؟أو طريقة لتكرار سلوك العلامة وعدم رفع حدث النقر للخريطة عند استدعاء Clusterclick؟جوجل والوثائق لم تساعدني.

شكرًا

Answer 1

إليك شيء يعمل ولكن ما زلت منفتحًا على إجابات أفضل أخرى.

أستخدم setTimeOut لنقل حدث Click Map ليكون آخر شيء يجب على 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;
}); 

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

لقد وجدت حلاً آخر قد ينجح.ابحث عن الكود التالي داخل markclusterer.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، "يُسمى هذا بنشر الحدث، حيث "يظهر" الحدث دائمًا في التسلسل الهرمي لـ 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();
    });
}