Leaflet.js：使用はCTRL + Iが<a href="http://leafletjs.com/" rel="noreferrer">http://leafletjs.com/</a>を使用しているマップをズーム＆モバイル

Question

に2本の指で地図を移動するためにスクロールする...それが唯一することが可能である：

1. 使用し、CTRL +は、ズームするスクロール何Googleマップので、同様のモバイル/タブレット

上の二本の指で地図

移動の地図...？コメントを...

これまでのところ、私のセットアップのthats：

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

Answer 1

私はあなたの第二の問題を解決するために管理。

::after疑似セレクタを使用してメッセージを表示するためにCSSを使用しました。

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

そして、タッチイベントをキャプチャするためのjavascript。

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') 
    } 
} 

あなたは1本の指を使用している場合、タイプはタッチイベントで、もしそうなら、それはメッセージでマップにクラスを追加する場合は、チェックします。複数の指を使用すると、クラスが削除されます。

Working demoモバイルデバイスを使用することをお勧めします。

あなたのCTRL +スクロール