MapBox触摸滚动页面

Question

我正在尝试在一个填满整个页面的布局上实现MapBox。我已经禁用了地图缩放选项，但是当在触摸设备上滚动时，地图会占据整个视口。我能否覆盖此行为或让浏览器像处理图像一样处理它？

- devlondoner

Answer 1

是的，您可以通过将leaflet函数设置为空来停止Mapbox侦听器阻止默认操作：

L.DomEvent.preventDefault = function(e) {return;}

为了去掉浏览器默认的元素轮廓线，你可以添加以下代码：

*:focus {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
  -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
}

这样做可以让我在触摸设备上进行滚动，不过我只是在安卓系统上测试过。请注意，这可能会对您的应用程序产生其他影响 - 可以通过进入mapbox.js并仅从您需要的侦听器中删除此调用来防止这些影响。

- milohoffman

---

太好了！这对我来说运行良好，但是另一个使用iPad的用户现在在触摸工具提示图标时出现问题。除非我添加alert()点击事件，否则它们不会保持打开状态。我无法解决这个问题。 - devlondoner

这看起来有点过度了。你基本上是在完全删除地图上的所有功能。有一些选项可以控制你可能想要禁用的每个元素，同时保持其他功能正常运作。 - squarecandy

Answer 2

这个例子已经改进了：缺失的一行是：

if (map.tap) map.tap.disable();

这将防止地图在触摸设备上终止轻敲事件。

- tmcw

---

这个“禁用了触摸处理程序”，正如文档所描述的那样 - 并没有禁用 OP 提问的触摸设备上的地图拖动功能。 - squarecandy

Answer 3

一种简单的CSS解决方案：pointer-events: none;

- Joimee Cajandab

Answer 4

移除其余监听器，就像这个例子中的那样 - 你可能还有一个名为dragging的监听器。

- tmcw

Answer 5

对于那些想要根据页面大小动态启用/禁用地图框滚动/缩放等功能的人（就像我一样），可以尝试：

$(document).ready(function() {
    $(window).on('resize', updateMap);
});

function updateMap() {
  var width = $(window).width();
  if (width < 768) {
    map.scrollWheelZoom.disable();
    map.doubleClickZoom.disable();
    map.dragging.disable();
    if (map.tap) map.tap.disable();
  }
  else {
    map.scrollWheelZoom.enable();
    map.doubleClickZoom.enable();
    map.dragging.enable();
    if (map.tap) map.tap.enable();
  }
}

将768替换为适合您布局的魔数。假设使用jQuery。

- CharlesA

Answer 6

在mapbox中，dragging参数的问题在于它控制了使用鼠标或其他指针设备进行点击和拖动以及使用触摸进行滑动拖动。不确定其他答案是否澄清了这个主要问题。

我认为问题的核心是，我们都喜欢点击拖动并认为它很容易使用，但我们不喜欢触摸拖动，因为它会干扰整个页面的滚动能力。

这是我最终使用的代码行。它依赖于Modernizr和jQuery，但如果需要，您也可以编写类似的代码。

// disable dragging the map on touch devices only
if ($('html').hasClass('touch')) map.dragging.disable();

- squarecandy