ปิดใช้งานการโต้ตอบแผ่นพับชั่วคราว


20

ฉันจะปิดการใช้งาน zoming / draging Mapview ใน Leaflet.js ชั่วคราวได้หลายวิธี แต่ก็ไม่มีโชค เป็นสิ่งสำคัญที่จะทำให้เป็นการชั่วคราวและฉันยังต้องการตัวเลือกเพื่อเปิดใช้งานอีกครั้ง


ความคิดใด ๆ วิธีการทำเช่นนี้กับ CSS? ฉันต้องปิดการใช้งานการลากบนมือถือโดยใช้คิวรีสื่อ ฉันพยายามตั้งเลเยอร์โปร่งใสด้านบนของมัน แต่มันคลิกขวาผ่านเลเยอร์นั้น ฉันยังเล่นกับตัวชี้เหตุการณ์ แต่ไม่มีโชค แนวทางที่เหมาะสมน่าจะผ่านการใช้ -webkit-user-drag: none; แต่ฉันใช้มันกับทุก ๆ องค์ประกอบที่ฉันสามารถหาได้และยังไม่มีโชค ขอบคุณ

ฉันตอบคำถามนี้ดังต่อไปนี้
hayatbiralem

คำตอบ:


33

ไปของคุณเพื่อต้องการที่จะทำ (สมมติว่าแผนที่ของคุณเป็นสายmap)

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

เปิดอีกครั้งด้วย

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';

2
ขอบคุณมาก. ฉันดูผิดมาก _ คิดว่าต้องมีวิธีการเดียวในการทำเช่นนั้น
Bernhard

1
วิธีการแก้ปัญหานี้มีปัญหาบางอย่าง: เคอร์เซอร์ของเมาส์ยังคงเป็นมือ การเลื่อนหน้าด้วยท่าทางสัมผัสไม่สามารถทำได้บนแผนที่ เมื่อการเปิด Popover เคลื่อนแผนที่จะไม่มีการเลื่อนกลับ
netAction

@netAction, คุณมีวิธีแก้ไขปัญหาการเลื่อนด้วยท่าทางสัมผัสหรือไม่?
Chris Fremgen

@ChrisFremgen: map.dragging.disable (); เคล็ดลับที่แผนที่หยุดดึงท่าทางการเลื่อน
netAction

มีวิธีการปิดการใช้งาน ZoomIn หรือไม่?
howard.D

5

หากคุณไม่ต้องการปิดการใช้งานตัวจัดการแต่ละตัวด้วยตนเองคุณสามารถวนลูปทั้งหมดและปิด / เปิดใช้งานได้

ปิดการใช้งาน

map._handlers.forEach(function(handler) {
    handler.disable();

});

ทำให้สามารถ

map._handlers.forEach(function(handler) {
    handler.enable();

});

ระวังว่าการใช้คุณสมบัติที่ไม่ใช่สาธารณะ (_handler) อาจทำให้เกิดข้อผิดพลาดในรหัสของคุณแม้ในเวอร์ชันแพทช์ของแผ่นพับเปลี่ยนแปลงเนื่องจากไม่รับประกันว่าจะไม่มีการเปลี่ยนแปลง ควรส่งคำขอคุณสมบัติไปที่ใบปลิว;)
Luckylooke

0

ผมคิดว่าคุณสามารถห่อแผนที่ของคุณกับภาชนะผู้ช่วยและคุณสามารถปิดการใช้งานกับคลาส CSS is-lockedง่ายๆเช่น

นี่คือสิ่งที่ฉันพูดถึง:

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

ฉันหวังว่ามันจะช่วย

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.