Vô hiệu hóa tương tác tờ rơi tạm thời

Làm cách nào tôi có thể tạm thời vô hiệu hóa zoming / kéo Mapview trong Leaflet.js Đã thử rất nhiều cách nhưng không gặp may. Điều quan trọng là làm cho nó tạm thời và tôi cũng cần tùy chọn để kích hoạt lại.

leaflet

— Bernhard
nguồn

Bất kỳ ý tưởng làm thế nào để làm điều này với CSS? Tôi cần phải tắt tính năng kéo trên thiết bị di động bằng truy vấn phương tiện. Tôi đã thử đặt một lớp trong suốt lên trên nó nhưng nó nhấp chuột phải qua lớp đó. Tôi thậm chí đã chơi với các sự kiện con trỏ nhưng không có may mắn. Cách tiếp cận phù hợp rất có thể thông qua việc sử dụng -webkit-user-drag: none; nhưng tôi đã áp dụng điều đó cho mọi yếu tố tôi có thể tìm thấy và vẫn không gặp may mắn. Cảm ơn.

Tôi đã trả lời câu hỏi này dưới đây .

— hayatbirusem

Câu trả lời:

bạn sẽ muốn làm (giả sử bản đồ của bạn là cuộc gọi 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';

bật lại với

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';

— Calvin
nguồn

Cảm ơn nhiều. Tôi đã nhìn rất sai _ nghĩ rằng phải có một phương pháp duy nhất để làm điều đó.

— Bernhard

Giải pháp này có một số vấn đề: Con trỏ chuột vẫn là một bàn tay. Không thể cuộn trang bằng cử chỉ chạm trên bản đồ. Khi mở Popover di chuyển bản đồ, nó sẽ không bao giờ quay trở lại.

— netAction

@netAction, Bạn có giải pháp nào cho vấn đề cuộn cử chỉ cảm ứng không?

— Chris Fremgen

@ChrisFremgen: map.dragging.disable (); thực hiện thủ thuật mà bản đồ dừng tìm nạp các cử chỉ cuộn.

— netAction

Có cách nào để chỉ vô hiệu hóa zoomIn?

— howard.D

Nếu bạn không muốn tắt từng trình xử lý theo cách thủ công, bạn có thể lặp qua tất cả chúng và vô hiệu hóa / kích hoạt chúng.

Vô hiệu hóa

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

});

Kích hoạt

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

});

— ustroetz
nguồn

Lưu ý rằng việc sử dụng các thuộc tính không công khai (_handlers) có thể gây ra lỗi trong mã của bạn ngay cả trên các phiên bản vá tờ rơi thay đổi vì nó không được bảo đảm là không thay đổi. Yêu cầu tính năng phải được gửi tới tờ rơi;)

— Luckylooke

Tôi nghĩ rằng, bạn có thể bọc bản đồ của mình bằng một thùng chứa trợ giúp và bạn có thể vô hiệu hóa nó với lớp CSS đơn giản như thế nào is-locked.

Đây là những gì tôi đang nói về:

.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;
}

Tôi hy vọng nó sẽ giúp.

— hayatbirusem
nguồn