7

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

4

6 回答 6

4

是的，您可以通过将传单函数设置为不执行任何操作来阻止 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 并仅从您需要的侦听器中删除此调用来防止这些后果。

于 2013-08-17T14:31:33.980 回答
3

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

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

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

于 2013-10-24T13:44:37.073 回答
2

像本例中那样删除其余的侦听器 - 您可能仍然拥有的是dragging.

于 2013-08-07T20:41:52.387 回答
2

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

于 2019-12-30T06:54:40.593 回答
0

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

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

于 2015-09-24T13:14:52.517 回答
0

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

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

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

// disable dragging the map on touch devices only
if ($('html').hasClass('touch')) map.dragging.disable();
于 2016-05-19T04:36:46.913 回答