Leaflet.js: Sử dụng Ctrl + cuộn để phóng to bản đồ & Di chuyển bản đồ bằng hai ngón tay trên điện thoại di động

Question

Tôi đang sử dụng http://leafletjs.com/ ... là nó có thể chỉ:

1. Sử dụng Ctrl + cuộn để phóng to bản đồ

2. bản đồ di chuyển bằng hai ngón tay trên điện thoại di động/tablet

... bản đồ những gì google như vậy tương tự không? Với những ý kiến ​​...

Cho đến nay thats thiết lập của tôi:

// Leaflet Maps 
var contactmap = L.map('contact-map', { 
     center: [41.3947688, 2.0787279], 
     zoom: 15, 
     scrollWheelZoom: false 
    }); 

Answer 1

tôi quản lý để giải quyết vấn đề thứ hai của bạn.

Tôi đã sử dụng css để hiển thị thông báo bằng cách sử dụng bộ chọn giả ::after.

#map { 
    &.swiping::after { 
    content: 'Use two fingers to move the map'; 
    } 
} 

Và javascript để nắm bắt các sự kiện chạm.

mapEl.addEventListener("touchstart", onTwoFingerDrag); 
mapEl.addEventListener("touchend", onTwoFingerDrag); 

function onTwoFingerDrag (e) { 
    if (e.type === 'touchstart' && e.touches.length === 1) { 
    e.currentTarget.classList.add('swiping') 
    } else { 
    e.currentTarget.classList.remove('swiping') 
    } 
} 

Nó sẽ kiểm tra nếu loại là một touchevent và nếu bạn đang sử dụng 1 ngón tay, nếu có thì nó sẽ thêm các lớp vào bản đồ với các thông báo. Nếu bạn sử dụng nhiều ngón tay, nó sẽ loại bỏ lớp đó.

Working demo Tôi khuyên bạn nên sử dụng thiết bị di động.

Code pen from the demo