मानचित्र पर क्लिक करने के बाद ही CAT माउस व्हील ज़ूम

Question

मैं USC JavaScript लाइब्रेरी के साथ काम कर रहा हूं और अपने HTML डॉक्यूमेंट में एक (वर्किंग) मैप अटैच कर रहा हूं। यह पृष्ठ के मध्य में है, और जब मैं अपने माउस व्हील के साथ नीचे स्क्रॉल कर रहा हूं और मानचित्र पर पहुंचता हूं, तो यह स्वचालित रूप से मानचित्र में आ जाता है।

मैं नक्शे पर रोक के बिना पृष्ठ के माध्यम से स्क्रॉल करना चाहता हूं। क्या मानचित्र पर पहले क्लिक के बाद ही पहिया ज़ूम को सक्रिय करने का एक तरीका है?

Answer 1

यह सरल है: scrollWheelZoom: falseविकल्प के साथ L.Map बनाएं , फिर एक श्रोता जोड़ें:

map.once('focus', function() { map.scrollWheelZoom.enable(); });

यदि आपको जूमिंग टॉगल करने की आवश्यकता है:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

Comments

धन्यवाद :) मैंने इसके लिए एक टिप्पणी शुरू की, लेकिन नीचे उत्तर में बहुत बड़ा मिला ।

— danwild

Answer 2

स्वीकृत उत्तर के टॉगल घटक पर एक टिप्पणी / सुधार , जो महान है (धन्यवाद)। परंतु।

मानचित्र के साथ सहभागिता करते समय, कई उपयोग मामलों के लिए उपयोगकर्ता को अपना कार्य करने के लिए मानचित्र पर क्लिक करने की भी आवश्यकता होती है, इसलिए यह:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

उपयोगकर्ता द्वारा वास्तव में नक्शे का उपयोग शुरू करने के बाद कुछ अप्रत्याशित व्यवहार हो सकता है।

मैं कुछ सुझाव दूंगा जो उपयोगकर्ता को थोड़ा अधिक सहज लग सकता है - माउस स्क्रॉलिंग को अक्षम करने के लिए मानचित्र पर क्लिक करें ।

उदाहरण के लिए अपने scrollWheelZoom: falseऊपर, तब सेट करें :

map.on('focus', function() { map.scrollWheelZoom.enable(); });
map.on('blur', function() { map.scrollWheelZoom.disable(); });

Comments

उपयोग focus/ blurनिश्चित रूप से मानचित्र की कार्यक्षमता को अधिक सहज बनाता है।

— युगलशैल

माना। फोकस / ब्लर दृष्टिकोण बहुत अच्छा है। धन्यवाद!

— sstringer

महान, लेकिन स्क्रॉल को अक्षम करने के लिए एक साधन की आवश्यकता होती है यदि मानचित्र पूर्ण-स्क्रीन है और उपयोगकर्ता तेजी से उत्तराधिकार में (और एक सेकंड के भीतर कई दिशात्मक परिवर्तन करता है) स्क्रॉल करता है। यह उलझा हुआ और नीचे स्क्रॉल तब होता है जब वे अटक जाते हैं और पूर्ण ब्राउज़र नक्शे को इसके ऊपर या नीचे सामग्री तक पहुंचने के लिए नहीं छोड़ सकते।

— लोरेन

Answer 3

USC.Sleep आपके काम को आसान बना देगा, और यह काफी विन्यास योग्य है

मूल रूप से, यह स्क्रॉल इवेंट को बंद कर देता है जब उन्हें ज़रूरत नहीं होती है और जब वे होते हैं तो आपके नक्शे को "जगाते" हैं।

मैं कोड पोस्ट करूंगा, लेकिन डिफॉल्ट्स इसे सही पाते हैं, इसलिए आपको इससे परे कुछ भी करने की आवश्यकता नहीं होगी <script src="path/to/leaflet-sleep.js"></script>और आपके पास इस तरह का नक्शा होगा ।

Answer 4

आप केवल उन 3 लाइनों द्वारा कर सकते हैं:

map.scrollWheelZoom.disable();
map.on('focus', () => { map.scrollWheelZoom.enable(); });
map.on('blur', () => { map.scrollWheelZoom.disable(); });

या:

map.scrollWheelZoom.disable();
this.map.on('click', () => { this.map.scrollWheelZoom.enable();});
this.map.on('mouseout', () => { this.map.scrollWheelZoom.disable();});