ล้อเมาส์ของแผ่นพับซูมเมื่อคลิกบนแผนที่เท่านั้น

ฉันทำงานกับห้องสมุด Leaflet JavaScriptและแนบแผนที่ (กำลังทำงาน) กับเอกสาร HTML ของฉัน มันอยู่ตรงกลางของหน้าและเมื่อฉันเลื่อนลงด้วยล้อเลื่อนของเมาส์และมาถึงแผนที่มันจะซูมเข้าสู่แผนที่โดยอัตโนมัติ

ฉันต้องการเลื่อนดูหน้าโดยไม่หยุดที่แผนที่ มีวิธีการเปิดใช้งานการซูมล้อหลังจากคลิกครั้งแรกบนแผนที่หรือไม่

ง่ายมาก: สร้าง L.Map ด้วยscrollWheelZoom: falseตัวเลือกจากนั้นเพิ่มผู้ฟัง:

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

หากคุณต้องการสลับการซูม:

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

ความคิดเห็นเพิ่มเติม / การปรับปรุงองค์ประกอบสลับของคำตอบที่ยอมรับซึ่งดีมาก (ขอบคุณ) แต่.

เมื่อมีการโต้ตอบกับแผนที่สำหรับการใช้งานหลายกรณีผู้ใช้จำเป็นต้องคลิกแผนที่เพื่อทำงานของพวกเขาดังนั้นสิ่งนี้:

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

Leaflet.Sleepจะทำให้งานของคุณง่ายขึ้นและสามารถกำหนดค่าได้มากมาย

โดยพื้นฐานแล้วมันจะปิดเหตุการณ์การเลื่อนเมื่อพวกเขาไม่ต้องการและ "ปลุก" แผนที่ของคุณเมื่อพวกเขาอยู่

ฉันต้องการโพสต์รหัส แต่ค่าเริ่มต้นดูเหมือนจะได้รับมันขวาเพื่อให้คุณมีแนวโน้มที่จะไม่ได้ต้องการอะไรเกิน<script src="path/to/leaflet-sleep.js"></script>และคุณจะมีแผนที่เช่นนี้

คุณสามารถทำได้เพียง 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();});