如何在Leaflet.js中临时禁用zoming /拖动Mapview。
尝试了很多方法，但是没有任何运气。 >

评论

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

#1 楼

您想做的事情（假设您的地图叫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';


评论

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

–伯恩哈德
13年3月20日在13:59


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

– netAction
15年3月16日在11:35


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

–克里斯·弗雷姆根（Chris Fremgen）
17年1月12日在14:57
@ChrisFremgen：map.dragging.disable（）;做到了地图停止获取滚动手势的技巧。

– netAction
17年1月12日在15:06
有一种方法只能禁用zoomIn吗？

–howard.D
17 Mar 22 '17 at 4:09

#2 楼

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

禁用

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

});


启用

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

});


评论

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

– Luckylooke
17年9月22日在7:35

#3 楼

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

这就是我在说的内容：

 .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;
}


我希望对您有所帮助。

#4 楼

我正在使用react-leaflet，并将很多自定义事件处理程序添加到我的传单地图中。我不能停止在传单domevent上的传播，因为这样做会引起问题（尤其是与我正在使用的其他框架中的组件（例如material-ui）有关）。
如果有人在同一条船上，这是一个对我有用的解决方案！
import React, { useEffect, useRef } from 'react'
import { DomEvent } from 'leaflet'
import { useLeaflet } from 'react-leaflet'

const PreventLeafletControl = (props) => {
  const controlRef = useRef()
  const leaflet = useLeaflet()
  useEffect(() => {
    if (controlRef) {
      const eventsClone = leaflet.map._events
      const eventsEmpty = Object.keys(eventsClone).reduce((accumulator, key) =>
        accumulator[key] = []
      , {})
      DomEvent.addListener(controlRef.current, 'mouseover', () => {
        leaflet.map._events = eventsEmpty
        leaflet.map._handlers.forEach(handler => handler.disable())
      })
      DomEvent.addListener(controlRef.current, 'mouseout', () => {
        leaflet.map._handlers.forEach(handler => handler.enable())
        leaflet.map._events = eventsClone
      })
    }
  })

  return <div ref={controlRef}>
    {props.children}
  </div>
}

export default PreventLeafletControl

只需将<PreventLeafletControl>包裹在您的自定义UI组件周围，您就可以了。

评论

请避免重复的答案：gis.stackexchange.com/a/376252/8104。此处有更多详细信息：meta.stackexchange.com/q/104227/641151

–亚伦♦
20-10-10在2:15