Leaflet JS - 实现手势处理以强制 2 手指滚动答案

【问题标题】：Leaflet JS - Implementing Gesture Handling to enforce 2 fingered scrollingLeaflet JS - 实现手势处理以强制 2 手指滚动
【发布时间】：2018-08-12 05:04:45
【问题描述】：

您知道当您使用移动设备并向下滚动包含谷歌地图的网页时。地图变暗并告诉您“用两根手指移动地图”。

我想在我的传单地图中完全实现这一点。 Leaflet 目前不提供这种开箱即用的功能。

Google 将此功能称为手势处理。如果你将它设置为“合作”，你就会得到我刚才描述的效果。 https://developers.google.com/maps/documentation/javascript/interaction

检测正在使用的手指数量并显示消息很容易，如我的代码示例所示。（您需要在移动设备或模拟器上运行它才能看到它的效果）

如果是 1 根手指，我会取消 touchmove 事件并显示我的警告。否则，我允许该事件应用于地图。但是，在我在地图上取消它之后，我需要想办法将一个手指触摸事件应用到包含页面。以便用户滚动页面。

有没有人有任何好主意如何实现这一目标？我想过使用 dispatchEvent 将接收到的 touchmove 事件对象直接中继到父文档。例如： document.dispatchEvent(touchmoveevent); 但没有运气。也许有更好的整体方法。

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>

【问题讨论】：

我猜你已经阅读了关于地图处理程序的传单文档？
@IvanSanchez 谢谢。我刚刚使用地图处理程序而不是 jQuery 模拟了一个测试。编写代码并符合 Leaflet 最佳实践的更好方法。但最终我遇到了同样的问题。我可以取消单指触摸移动并显示警告，但我无法让它也将页面滚动到地图之外。
禁用默认的地图平移处理程序，在第一次两指交互时启用它。
谢谢。是的，我能够使用这种方法获得一个可行的解决方案。我会整理一下，然后作为答案发布。

标签： javascript leaflet dispatchevent touchmove

【解决方案1】：

这样做的关键是确保在初始化地图时禁用拖动、点击和 scrollWheelZoom。

然后在检测到 2 根手指拖动或使用命令或 ctrl 键滚动时暂时重新启用它们。

我现在已将此解决方案打包到传单插件中。

https://github.com/elmarquis/Leaflet.GestureHandling

【讨论】：