暂时停用小叶互动

如何在Leaflet.js中临时禁用zoming / draging Mapview。尝试了很多方法，但没有任何运气。将其设置为临时状态非常重要，我还需要再次启用该选项。

leaflet

— 伯恩哈德
source

任何想法如何使用CSS做到这一点？我需要使用媒体查询禁用在移动设备上的拖动。我尝试在其上设置一个透明层，但是它会在该层上单击。我什至玩过指针事件，但没有运气。正确的方法很可能是通过使用-webkit-user-drag来实现的。但我已将其应用于我能找到的每个元素，但仍然没有运气。谢谢。

我在下面回答了这个问题。

— hayatbiralem

Answers:

您想做的事情（假设您的地图叫map）

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

再次打开

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';

— 加尔文
source

非常感谢你。我看错了_认为必须有一种方法可以做到这一点。

— Bernhard

此解决方案存在一些问题：鼠标光标仍然是手。无法在地图上使用触摸手势滚动页面。当Popover的打开移动地图时，它将永不后退。

— netAction

@netAction，您是否有解决触摸手势滚动问题的方法？

— 克里斯·弗雷姆根

@ChrisFremgen：map.dragging.disable（）; 做到了地图停止获取滚动手势的技巧。

— netAction

有一种方法只能禁用zoomIn吗？

— howard.D

如果您不想手动禁用每个处理程序，则可以遍历所有处理程序并禁用/启用它们。

禁用

map._handlers.forEach(function(handler) {
    handler.disable();

});

启用

map._handlers.forEach(function(handler) {
    handler.enable();

});

— 乌斯特罗茨
source

请注意，使用非公共属性（_handlers）可能会导致代码出错，即使在传单补丁版本更改时也是如此，因为它不能保证保持不变。功能请求应提交给传单;）

— Luckylooke

我认为，您可以使用辅助容器包装地图，也可以使用简单的CSS类将其禁用is-locked。

这就是我在说的：

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

希望对您有所帮助。

— Hayatbiralem
source