Trang cuộn MapBox trên cảm ứng

Question

Tôi đang cố gắng triển khai MapBox trên bố cục lấp đầy 100% trang. Tôi đã tắt tùy chọn thu phóng bản đồ nhưng các sự cố xảy ra khi cố di chuyển trên các thiết bị cảm ứng nơi bản đồ điền vào chế độ xem. Tôi có thể ghi đè lên điều này hoặc để trình duyệt xử lý nó như một hình ảnh không?

Answer 1

Ví dụ này đã được cải thiện: dòng mà đã mất tích là:

if (map.tap) map.tap.disable();

này sẽ ngăn chặn bản đồ từ giết chết sự kiện tap trên các thiết bị cảm ứng.

Answer 2

Xóa phần còn lại của người nghe as in this example - người bạn có thể vẫn có là dragging.

Answer 3

Vâng, bạn có thể ngừng nghe Mapbox từ ngăn chặn hành động mặc định bằng cách thiết lập các chức năng tờ rơi để làm gì:

L.DomEvent.preventDefault = function(e) {return;} 

Để loại bỏ các phác thảo đặt xung quanh phần tử bằng trình duyệt mà nếu không sẽ bị ngăn chặn, bạn có thể thêm:

*:focus { 
    outline: none; 
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
} 

Điều này cho phép di chuyển trên thiết bị cảm ứng cho tôi, mặc dù tôi chỉ được thử nghiệm trên Android. Lưu ý rằng điều này có thể có các hậu quả khác đối với ứng dụng của bạn - chúng có thể được ngăn chặn bằng cách truy cập vào mapbox.js và xóa cuộc gọi này khỏi chỉ những người nghe mà bạn cần.

Answer 4

Đối với những người muốn tự động bật/tắt hộp đồ di chuyển/phóng to vv tùy thuộc vào kích thước trang (như tôi đã làm), bạn có thể thử:

$(document).ready(function() { 
    $(window).on('resize', updateMap); 
}); 

function updateMap() { 
    var width = $(window).width(); 
    if (width < 768) { 
    map.scrollWheelZoom.disable(); 
    map.doubleClickZoom.disable(); 
    map.dragging.disable(); 
    if (map.tap) map.tap.disable(); 
    } 
    else { 
    map.scrollWheelZoom.enable(); 
    map.doubleClickZoom.enable(); 
    map.dragging.enable(); 
    if (map.tap) map.tap.enable(); 
    } 
} 

Thay thế 768 bằng của số ma thuật phù hợp với bố trí của bạn. Giả sử jQuery.

Answer 5

thử thêm

if (map.tap) map.dragging.disable(); 

Answer 6

Vấn đề với dragging tham số trong mapbox là nó điều khiển cả nhấp chuột và giữ kéo với một con chuột hoặc thiết bị trỏ khác và các swiping chuyển động kéo sử dụng cảm ứng. Không chắc chắn bất kỳ câu trả lời nào khác làm rõ rằng đây là vấn đề chính.

Trái tim của vấn đề mà tôi nghĩ rằng OP đang nhận được là tất cả chúng ta đều thích nhấp chuột kéo và nghĩ rằng nó dễ sử dụng, nhưng chúng tôi không thích việc kéo cảm ứng vì nó cản trở khả năng cuộn toàn bộ trang.

Đây là dòng mã tôi đã sử dụng. Nó phụ thuộc vào Modernizr và jQuery, nhưng bạn có thể viết một cái gì đó tương tự mà không có chúng nếu bạn cần.

// disable dragging the map on touch devices only 
if ($('html').hasClass('touch')) map.dragging.disable();