MapBox上的滚动页面

我试图在填充100％页面的布局上实现MapBox。我已禁用地图缩放选项，但试图在地图填充视口的触控设备上滚动时出现问题。我可以覆盖这个或让浏览器把它当作图片吗？MapBox上的滚动页面

2013-08-06 devlondoner

这个例子进行了改进：这是缺少行是：

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

这将防止从地图在触摸设备上杀死自来水事件。

2013-10-24 13:44:37 tmcw

如[文档]（https://www.mapbox.com/mapbox.js/example/v1.0.0/disable-zooming-panning/）中所述，此“禁用抽头处理程序” - 不会禁用地图拖动在OP询问的触摸设备上 – squarecandy

删除其余的听众as in this example - 您可能还有的那个是dragging。

来源

2013-08-07 20:41:52 tmcw

是的，你可以通过设置小册子功能做不择手段从防止默认动作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-17 14:31:33 milohoffman

太棒了！这对我来说很好，但是现在iPad上的另一个用户在点击工具提示图标时遇到问题。除非添加alert（）点击事件，否则它们不会保持打开状态。我被困在一个方法来解决这个问题。 – devlondoner

这看起来非常严厉。你基本上完全在地图上加入了所有的功能。有些选项可以控制每个可能要禁用的元素，而其他元素则可以运行。 – squarecandy

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

$(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-24 13:14:52 CharlesA

尝试添加

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

来源

2015-12-12 11:58:31

的问题与在mapbox的dragging参数是它同时控制点击和保持与使用触摸鼠标或其它定点设备和所述刷运动拖拽。不确定任何其他答案都将此作为主要问题。

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

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

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

来源

2016-05-19 04:36:46 squarecandy

MapBox上的滚动页面

回答

相关问题