我正在尝试在一个填满整个页面的布局上实现MapBox。我已经禁用了地图缩放选项,但是当在触摸设备上滚动时,地图会占据整个视口。我能否覆盖此行为或让浏览器像处理图像一样处理它?
我正在尝试在一个填满整个页面的布局上实现MapBox。我已经禁用了地图缩放选项,但是当在触摸设备上滚动时,地图会占据整个视口。我能否覆盖此行为或让浏览器像处理图像一样处理它?
是的,您可以通过将leaflet函数设置为空来停止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;
}
这样做可以让我在触摸设备上进行滚动,不过我只是在安卓系统上测试过。请注意,这可能会对您的应用程序产生其他影响 - 可以通过进入mapbox.js并仅从您需要的侦听器中删除此调用来防止这些影响。
这个例子已经改进了:缺失的一行是:
if (map.tap) map.tap.disable();
这将防止地图在触摸设备上终止轻敲事件。
pointer-events: none;
对于那些想要根据页面大小动态启用/禁用地图框滚动/缩放等功能的人(就像我一样),可以尝试:
$(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。
在mapbox中,dragging
参数的问题在于它控制了使用鼠标或其他指针设备进行点击和拖动以及使用触摸进行滑动拖动。不确定其他答案是否澄清了这个主要问题。
我认为问题的核心是,我们都喜欢点击拖动并认为它很容易使用,但我们不喜欢触摸拖动,因为它会干扰整个页面的滚动能力。
这是我最终使用的代码行。它依赖于Modernizr和jQuery,但如果需要,您也可以编写类似的代码。
// disable dragging the map on touch devices only
if ($('html').hasClass('touch')) map.dragging.disable();