Leaflet JS-实现手势处理以强制2指滚动 [英] Leaflet JS - Implementing Gesture Handling to enforce 2 fingered scrolling
问题描述
您知道何时使用移动设备，并向下滚动带有Google地图的网页.地图变暗，并告诉您用两根手指移动地图".
You know when you're on a mobile device and you scroll down a web page which has a google map. The map goes dark and tells you "Use two fingers to move the map".
我想在我的Leaflet地图中完全实现这一点. Leaflet当前不提供此类功能.
I want to implement exactly this in my Leaflet map. Leaflet doesn't currently offer this kind of functionality out the box.
Google将此功能称为手势处理".如果将其设置为合作"，您将获得我刚刚描述的效果. https://developers.google.com/maps/documentation/javascript/interaction
Google refers to this functionality as Gesture Handling. If you set it to "Cooperative" you get the effect I just described. https://developers.google.com/maps/documentation/javascript/interaction
很容易检测到正在使用的手指的数量并显示消息，如我的代码示例所示. (您需要在移动设备或仿真器上运行它才能看到它的效果)
It's easy enough to detect the number of fingers being used and display the message as shown in my code example. (You'll need to run this on a mobile device or emulator to see it in effect)
如果是1根手指，我将取消touchmove事件并显示警告. 否则，我允许该事件应用于地图. 但是我需要弄清楚在地图上取消手指触摸事件后将其应用到包含页面的某种方法.以便用户改为滚动页面.
If it's 1 finger I cancel the touchmove event and show my warning. Otherwise I allow the event to apply to the map. But I need to figure out some way of applying that one fingered touch event to the containing page after I've cancelled it on the map. So that the user scrolls the page instead.
有人有什么好主意如何实现这一目标吗?我考虑过使用dispatchEvent将接收到的touchmove事件对象直接中继到父文档. 例如: document.dispatchEvent(touchmoveevent); 但是没有运气.也许有更好的整体方法.
Does anyone have any good ideas how to achieve this? I thought about using dispatchEvent to relay the received touchmove event object directly to the parent document. e.g: document.dispatchEvent(touchmoveevent); But no luck. Perhaps there's a better overall approach.
var myMap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(myMap);
$("#mapid").on("touchmove", function(e) {
if (e.touches.length !== 2) {
$('.mask').fadeIn();
return false;
}
});
$("#mapid").on("touchend", function(e) {
if ($('.mask').is(':visible')) {
$('.mask').fadeOut();
}
});
#mapid {
height: 600px;
}
.mask {
display: none;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
z-index: 400;
}
.message {
color: #ffffff;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<head>
<body>
<h1>Leaflet Map</h1>
<div id="mapid"></div>
<div class="scroll-shield"></div>
<div class="mask">
<div class="message">
<p>Use two fingers to move the map</p>
</div>
</div>
<h2>Stuff below</h2>
<ul>
<li>Here</li>
<li>is</li>
<li>some</li>
<li>stuff</li>
<li>below</li>
</ul>
</body>
推荐答案
此操作的关键是确保在初始化地图时禁用拖动，点击和scrollWheelZoom.
The key to this was ensuring that dragging, tap and scrollWheelZoom are disabled when intitializing the map.
然后在检测到两指拖动或使用Command或Ctrl键滚动时临时重新启用它们.
Then temporarily re-enabling them when 2 fingered dragging, or scrolling with command or ctrl key is detected.
我现在已经将此解决方案打包到一个传单插件中.
I've now packaged this solution into a leaflet plugin.
https://github.com/elmarquis/Leaflet.GestureHandling
这篇关于Leaflet JS-实现手势处理以强制2指滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
