2017-08-31 1 views
5

に2本の指で地図を移動するためにスクロールする...それが唯一することが可能である:Leaflet.js:使用はCTRL + Iが<a href="http://leafletjs.com/" rel="noreferrer">http://leafletjs.com/</a>を使用しているマップをズーム&モバイル

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

上の二本の指で地図

  • 移動の地図...?コメントを...

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

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

    https://gis.stackexchange.com/questions/111887/leaflet-mouse-wheel-zoom-only-after-click-on-map非常に似ソリューション一本指のパンを防ぐためにmap.dragging = falseを設定するべきです – SurisDziugas

    答えて

    4

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

    ::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 +スクロール
    +0

    マインドへ

    Code pen from the demo

    flightwusel

    関連する問題

     関連する問題