触摸 MapBox 滚动页面

Question

我正在尝试在填充 100% 页面的布局上实现 MapBox。 我已经禁用了地图缩放选项，但是当尝试在地图填充视口的触摸设备上滚动时出现问题。 我可以覆盖它还是让浏览器将其视为图像？

Answer 1

是的，您可以通过将传单功能设置为什么都不做来阻止 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; 
}

这允许我在触摸设备上滚动，尽管我只在 Android 上测试过。 请注意，这可能会对您的应用程序产生其他后果 - 这些可能可以通过进入 mapbox.js 并仅从您需要的侦听器中删除此调用来防止。

Answer 2

此示例已改进：缺少的行是：

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

这将防止地图杀死触摸设备上的点击事件。

Answer 3

像本例一样删除其余的侦听器 - 您可能仍然拥有的侦听器正在dragging 。

Answer 4

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

Answer 5

尝试添加

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

Answer 6

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

$(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。

Answer 7

mapbox 中的dragging参数的问题在于它控制使用鼠标或其他指点设备的单击并按住拖动和使用触摸的滑动运动拖动。 不确定任何其他答案是否将其作为主要问题澄清。

我认为 OP 遇到的问题的核心是我们都喜欢单击拖动并认为它易于使用，但我们不喜欢触摸拖动，因为它会干扰滚动整个页面的能力.

这是我最终使用的代码行。 这取决于 Modernizr 和 jQuery，但如果需要，您可以在没有它们的情况下编写类似的东西。

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