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

删除其余的听众as in this example - 您可能仍然拥有的是dragging。

Answer 4

尝试添加

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

Answer 5

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

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();

触摸MapBox滚动页面

7 个答案: