問題描述
您知道當您使用移動設備并向下滾動包含谷歌地圖的網頁時.地圖變暗并告訴您用兩根手指移動地圖".
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 目前不提供這種開箱即用的功能.
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" 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.
然后在檢測到 2 根手指拖動或使用命令或 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 手指滾動的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！