web-dev-qa-db-ja.com

リーフレットマップのタッチ操作をカスタマイズする方法

リーフレットマップをカスタマイズしてモバイルデバイスで1本指のスクロールを無効にし、Googleマップのように2本指のスクロールを追加する方法（ https://developers.google.com/maps/documentation/javascript/interaction を参照）

私は、指を下にして指を上に置き、カスタムオーバーレイまたはsthでリスナーのようなものを考えています。そのように役立つはずです。しかし、これをリーフレットのプラグインとして正しく統合するにはどうすればよいですか？

<html>
  <head>
    <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  </head>
  <body>
    <div id="mapid" style="width: 600px; height: 400px;"></div>
    <script>
      var mymap = L.map('mapid', {center: [48,9], zoom:8, layers: [L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')]});
    </script>
  </body>
</html>
mapstouchleafletinteraction
12
Patrick

マップの draggingオプション をfalseに設定するだけですが、 touchZoomオプション をtrueのままにしてください。これにより、1本指のドラッグが無効になり、ユーザーが2本の指でピンチズームを実行できるようになります。

この動作をモバイルデバイスでのみ行う場合は、 L.Browser.mobile は、draggingオプションの値を次のように設定します。

var map = L.map('map', { dragging: !L.Browser.mobile });
9
IvanSanchez