क्लिक करें हैंडलर और स्क्रॉलबार के साथ Google मानचित्र इन्फोबॉक्स

Question

मेरे पास Google मानचित्र javscript API और इन्फोबॉक्स प्लग-इन (मूल जानकारीविंडो का अनुकूलन संस्करण) का उपयोग करके एक एप्लिकेशन है।

यह ठीक काम कर रहा था जब तक कि मेरे पास निम्न उपयोग-केस नहीं था: यदि सामग्री बड़ी है, तो मुझे स्क्रॉलबार के साथ एक इन्फोबॉक्स चाहिए, और इसमें क्लिक श्रोताओं के साथ कुछ HTML तत्व भी शामिल होने की आवश्यकता है।

इन्फोबॉक्स के अंदर क्लिक हैंडलर का समर्थन करने के लिए मुझे आमतौर पर क्या करना है, सक्षम हैवेंटप्रॉपेशन = सत्य सेट करना है, और क्लिक हैंडलर सेट करने के लिए jQuery प्रतिनिधि का उपयोग करना है। अगर मैं घटना प्रसार की अनुमति नहीं देता तो jQuery प्रतिनिधि काम नहीं करता है।

यह ठीक काम करता है जब तक कि मुझे इसे एक कार्यशील स्क्रॉलबार के साथ संयोजित नहीं करना पड़ा! जो मैंने पाया है वह है कि स्क्रॉलबार केवल तभी काम करेगा यदि मेरे पास सक्षम है IventPropagation = false, क्योंकि यदि ईवेंट प्रचार सक्षम है तो ड्रैग इवेंट बस मानचित्र पर पास हो जाता है और पैनिंग के रूप में व्याख्या किया जाता है।

क्या किसी को पता है कि मैं दोनों के लिए क्या कर सकता हूं, इन्फोबॉक्स सामग्री पर एक फ़ंक्शनिंग स्क्रॉलबार है, और कुछ शंकु पर क्लिक हैंडलर सेट करने में सक्षम हो सकता है?

मेरे लिए यह तार्किक लगता है कि enableEventPropagation = false दोनों मुद्दों को हल करेगा, क्योंकि मुझे समझ में नहीं आ रहा है कि एचटीएमएल तत्वों से जुड़े हैंडलरों को आग लगाने के लिए क्लिक ईवेंट को नक्शे पर प्रचारित करने की आवश्यकता क्यों है।

{ 
     content: "[my html in here]", 
     disableAutoPan: false, 
     pixelOffset: new google.maps.Size(-77, 10), 
     boxClass: "infoBox", 
     infoBoxClearance: new google.maps.Size(18, 30), 
     closeBoxMargin: "14px 6px", 
     pane: "floatPane", 
     enableEventPropagation: true 
}; 

Answer 1

शायद ज़रुरत पड़े तो आप अभी भी इस पर काम कर रहे हैं, तो आप पैनिंग बंद करने के लिए अपने नक्शे विकल्पों को बदलने के/जूमिंग जब माउस में प्रवेश करती है की जरूरत है:

यह मेरा Infobox के लिए सेटअप-वस्तु है infobox। बस के रूप में एक अतिरिक्त पकड़ लिया

$(document).delegate("div#ib", "mouseenter", function() { 

    theMap.setOptions({ 
     draggable: false, 
     scrollwheel: false 
    }); 
    console.log("mouse enter detected"); 

}); 

$(document).delegate("div#ib", "mouseleave", function() { 
    theMap.setOptions({ 
     draggable: true, 
     scrollwheel: true 
    }); 
    console.log("mouseleave detected"); 
});