Question

如何自定义传单地图以禁用移动设备上的单指滚动并添加两个手指滚动，如谷歌地图（请参阅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>

Answer 1

只需将dragging option of your map设置为false，但请务必将touchZoom option保持为true。这将禁用单指拖动，同时允许用户使用两个手指执行双指缩放，这也会平移地图。

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

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

Answer 2

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

有效！

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

2 个答案: