Bánh xe chuột chỉ phóng to sau khi nhấp vào bản đồ

19

Tôi đang làm việc với Thư viện JavaScript Tờ rơi và đính kèm bản đồ (đang hoạt động) vào Tài liệu HTML của mình. Nó ở giữa trang và khi tôi cuộn xuống bằng bánh xe chuột và đến bản đồ, nó sẽ tự động phóng to vào bản đồ.

Tôi muốn cuộn qua trang mà không dừng lại ở bản đồ. Có cách nào để kích hoạt thu phóng bánh xe chỉ sau lần nhấp đầu tiên trên bản đồ không?

— Jandroide
nguồn

27

Thật đơn giản: tạo L.Map với scrollWheelZoom: falsetùy chọn, sau đó thêm người nghe:

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

Nếu bạn cần chuyển đổi thu phóng:

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

— Ilja Zverev
nguồn

Cảm ơn :) Tôi đã bắt đầu một bình luận cho điều này nhưng đã quá lớn nên hãy trả lời bên dưới .

— danwild

13

Thêm một nhận xét / cải tiến về thành phần chuyển đổi của câu trả lời được chấp nhận , thật tuyệt vời (cảm ơn). Nhưng.

Khi tương tác với bản đồ, trong nhiều trường hợp sử dụng, người dùng cũng cần nhấp vào bản đồ để thực hiện nhiệm vụ của mình, vì vậy, điều này:

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

Có thể dẫn đến một số hành vi không mong muốn khi người dùng thực sự bắt đầu sử dụng bản đồ.

Tôi sẽ đề xuất một cái gì đó có vẻ trực quan hơn một chút cho người dùng - nhấp vào bản đồ để tắt cuộn chuột .

Ví dụ: đặt của bạn scrollWheelZoom: falsenhư trên, sau đó:

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

— danwild
nguồn

1

Sử dụng focus/ blurchắc chắn làm cho chức năng bản đồ trực quan hơn nhiều.

— gỡ rối

Đã đồng ý. Cách tiếp cận tập trung / mờ là tuyệt vời. Cảm ơn!

— sstringer

Tuyệt vời, nhưng cần một phương tiện để vô hiệu hóa cuộn nếu bản đồ ở chế độ toàn màn hình và người dùng cuộn vào và ra liên tiếp nhanh chóng (thực hiện một số thay đổi hướng trong vòng một giây). Việc cuộn lên xuống nhầm lẫn này xảy ra khi chúng bị kẹt và không thể rời khỏi bản đồ trình duyệt đầy đủ để truy cập nội dung bên trên hoặc bên dưới nó.

— Loren

6

Tờ rơi. Giấc ngủ sẽ giúp công việc của bạn trở nên dễ dàng và có nhiều cấu hình

Về cơ bản, nó sẽ tắt các sự kiện cuộn khi chúng không cần thiết và "đánh thức" bản đồ của bạn khi có.

Tôi đã đăng mã, nhưng các mặc định dường như đã hiểu đúng, vì vậy bạn có thể sẽ không cần bất cứ thứ gì ngoài <script src="path/to/leaflet-sleep.js"></script>và bạn sẽ có một bản đồ như thế này .

— người dùng3276552
nguồn

0

Bạn có thể làm điều đó chỉ bằng 3 dòng đó:

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

hoặc là:

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

— ofir_aghai
nguồn