如何在传单地图上自定义触摸交互 [英] 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 选项 为 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 设置拖动选项的值，如
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屋！
