मानचित्र के भीतर div के लिए पत्रक मानचित्र पर पैनिंग / ड्रैग करना अक्षम करें

Question

क्या किसी को पता है कि जब आप क्लिक करते हैं और मैप के भीतर एम्बेड किए गए डिव बॉक्स के ऊपर ड्रैग करते हैं तो पैनिंग को कैसे दबा सकते हैं?

उदाहरण के लिए यहाँ है, जब आप क्लिक करें और किंवदंती के शीर्ष पर खींचें, नक्शे आप के साथ खींच लेता है। मैं उस फंक्शन को दबाना चाहता हूं। मैं जानता हूँ कि अगर यह तकनीक है, लेकिन मैं जानना चाहता हूं कि क्या यह एकमात्र तरीका है:

map.dragging.disable();

Comments

मैंने jQuery .hover श्रोता का उपयोग करके समान कार्यशीलता को लागू किया है (निष्क्रिय करने और खींचने में सक्षम करने के लिए हैंडलरइन और हैंडलरऑट का उपयोग करके)। यकीन नहीं होता है कि आपके लिए एक विकल्प है: api.jquery.com/hover

— evv_gis

Answer 1

USC वेबसाइट से उदाहरण का उपयोग करते हुए , ध्यान दें कि L.Controlऑब्जेक्ट को इस रूप में तुरंत कहां लिखा गया है info; यह <div>मानचित्र के होवर इंटरैक्शन से संबद्ध ऊपरी-दाएँ में स्थित बॉक्स है। यह वह जगह है जहाँ इसे index.htmlपत्रक उदाहरण से परिभाषित किया गया है:

    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };

    info.addTo(map);

उपयोगकर्ता के कर्सर के इस <div>बॉक्स के अंदर होने पर ड्रैगिंग को अक्षम करने के लिए , एक इवेंट श्रोता को उस HTMLElement( <div>तत्व) में जोड़ें, जिसमें L.Controlऑब्जेक्ट है:

    // Disable dragging when user's cursor enters the element
    info.getContainer().addEventListener('mouseover', function () {
        map.dragging.disable();
    });

    // Re-enable dragging when user's cursor leaves the element
    info.getContainer().addEventListener('mouseout', function () {
        map.dragging.enable();
    });

याद है कि पहले उदाहरण के mapरूप में परिभाषित किया गया L.Mapथा।

Comments

धन्यवाद @ आर्थर, मैं इस दृष्टिकोण से परिचित हूं। मैं उम्मीद कर रहा था कि कोई व्यक्ति सूचक-घटनाओं के रूप में सीएसएस का उपयोग करके समाधान पेश कर सकता है: ऑटो या पॉइंटर-ईवेंट: कोई भी या उन जैसी कोई चीज़ नहीं, जो मेरे लिए बहुत काम की नहीं है। यदि कोई और बेहतर समाधान पोस्ट नहीं करता है, तो मैं आपको चेक दूंगा, क्योंकि इसका मतलब होगा कि यह सबसे अच्छा समाधान है।

— श्री कानोलैटो

मुझे भी ऐसा ही देखना चाहिए। यदि सीएसएस इस समस्या को हल कर सकता है, तो अच्छा होगा, लेकिन इसके पॉइंटर घटनाओं को किस तत्व से प्रबंधित किया जाना चाहिए? leaflet-controlतत्व के अंतर्गत होता है leaflet-containerतत्व और बाद सूचक घटनाओं ट्रिगर ज़ूम और पैनिंग प्राप्त कर रहा है।

— आर्थर

मैं इसे बिना किसी लाभ के डिवॉर्स ऑफ इंटरेस्ट में डालने की कोशिश कर रहा हूं।

— श्री कानोलैटो

हाँ, और यह समझ में आता है: <div>ब्याज का एक बच्चा है leaflet-controlजो खुद के अंदर है leaflet-container। घटनाओं को माता-पिता द्वारा प्राप्त किया जाता है ( leaflet-containerबच्चे से पहले leaflet-control) ( )।

— आर्थर

Answer 2

इसका एक वैकल्पिक समाधान जावास्क्रिप्ट के साथ घटना के प्रचार को रोकना है (जैसे कि यह USC नियंत्रणों के लिए किया जाता है, जैसे जूम बटन):

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}