如何在传单地图上自定义触摸交互答案

【问题标题】：How to customize touch interaction on leaflet maps如何在传单地图上自定义触摸交互
【发布时间】：2017-01-12 21:05:59
【问题描述】：

如何自定义传单地图以禁用移动设备上的单指滚动并像谷歌地图一样添加两指滚动（请参阅https://developers.google.com/maps/documentation/javascript/interaction）

我认为类似于手指向下和手指向上的监听器以及自定义覆盖或某事。这样应该会有所帮助。但是如何正确地将其作为插件集成到传单中？

<html>
  <head>
    <link href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" rel="stylesheet"/>
    <script src="https://unpkg.com/leaflet@1.0.2/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>

【问题讨论】：

添加了示例地图。正常行为：如果在地图框中开始触摸，则地图移动。如果使用两根手指（e.originalEvent.touches.length == 2），我会寻找仅滚动地图的解决方案，否则应滚动页面。
顺便说一句，有一个feature request for this in Leaflet's UserVoice。
如果您正在寻找 Google 风格的手势处理，请查看以下问题：Leaflet JS - Implementing Gesture Handling to enforce 2 fingered scrolling

标签： maps touch leaflet interaction

【解决方案1】：

只需将dragging option of your map 设置为false，但请确保将touchZoom option 保留为true。这将禁用单指拖动，同时允许用户用两根手指执行捏拉缩放，这也会平移地图。

如果您只希望在移动设备中使用此行为，请使用L.Browser.mobile 设置dragging 选项的值，如

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

【讨论】：

谢谢，但我需要一个允许拖动地图和页面的解决方案（如上面链接中所述）。地图也需要拖动，但如果地图覆盖了移动设备上的大部分屏幕，则无法将页面滚动回顶部。
那你是说你试过这个还是不行？
舒尔，使用此选项，可以拖动页面，但不能再用一根、两根或更多手指拖动地图。此外，由于页面也是用两根手指滚动的，因此无法再缩放地图了。
我尝试添加一个覆盖层，它可以获取 ex.originalEvent.touches.length 并在 touchmove 事件中临时禁用地图拖动。但是需要在 touchmove 之前触发事件才能得到正确的结果...
好的，我找到了解决方案here。我建议将其包含在下一个用户的答案中。

【解决方案2】：

这是一个成立于here 的有效解决方案。 @BlueManCZ 评论的所有学分

L.map('map', {
    dragging: !L.Browser.mobile,
    tap: !L.Browser.mobile
})

【讨论】：

【解决方案3】：

正如Corrodian 评论中提到的，您可以在 Leaflet 上找到 GestureHandling 插件。

它是由elMarquis创建的，可以在这里找到https://elmarquis.github.io/Leaflet.GestureHandling/examples/

我已经通过在传单之后包含 css 和 js 来完成这个插件：

<link rel="stylesheet" href="css/leaflet-gesture-handling.min.css" type="text/css">
<script src="js/leaflet-gesture-handling.min.js"></script>

并在地图中添加 gestureHandling 选项，如下所示：

var map = L.map("map", {
    center: [-25.2702, 134.2798],
    zoom: 3,
    gestureHandling: true
});

有效！

【讨论】：