如何自定义传单地图上的触摸交互 [英] How to customize touch interaction on leaflet maps
问题描述
如何自定义传单地图以在移动设备上禁用单指滚动并像谷歌地图一样添加两指滚动(请参阅 https://developers.google.com/maps/documentation/javascript/interaction)
How to customize leaflet maps to disable one-finger scroll on mobile devices and add two finger scroll like google maps (see https://developers.google.com/maps/documentation/javascript/interaction)
我认为类似于手指向下和手指向上的侦听器以及自定义覆盖层或某物.这样应该会有所帮助.但是如何将其作为插件正确集成到传单中?
I think something like a listener on finger down and finger up and a custom overlay or sth. like that should help. But how to correctly integrate this as a plugin in leaflet?
<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>推荐答案
只需设置拖动地图选项到false，但一定要保留touchZoom option 为 true.这将禁用单指拖动，同时允许用户用两根手指执行捏合缩放，这也会平移地图.
Simply set the dragging option of your map to false, but be sure to keep the touchZoom option as true. This will disable one-finger dragging, while allowing the user to perform pinch-zoom with two fingers, which also pan the map around.
如果您只希望在移动设备中使用此行为，请使用 L.Browser.mobile 设置dragging选项的值，如
If you want this behaviour only in mobile devices, use L.Browser.mobile to set the value of the dragging option, as in
var map = L.map('map', { dragging: !L.Browser.mobile });
这篇关于如何自定义传单地图上的触摸交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
