触摸时 MapBox 滚动页面答案

【问题标题】：MapBox scroll page on touch触摸时 MapBox 滚动页面
【发布时间】：2013-08-07 04:55:30
【问题描述】：

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

【问题讨论】：

标签： javascript touch mapbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

docs 中描述的“禁用点击处理程序” - 不会禁用 OP 询问的触摸设备上的地图拖动

【解决方案5】：

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

【讨论】：

太棒了！这对我来说很好，但是 iPad 上的另一个用户现在在点击工具提示图标时遇到问题。除非我添加 alert() click 事件，否则它们不会保持打开状态。我被困在解决这个问题的方法上。
这似乎非常严厉。您基本上是在完全破坏地图上的所有功能。有一些选项可以控制您可能想要禁用的每个元素，同时让其他元素保持运行。

【解决方案6】：

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

【讨论】：