传单，重现/调用拖动事件

Posted 2023-05-08

【中文标题】传单，重现/调用拖动事件

【英文标题】：Leaflet, reproduce/call dragging event

【发布时间】：2018-12-10 18:40:24

【问题描述】：

我的项目使用 Angular 6 和 Leaflet 1.2。

当用户在 Leaflet Map 上保持右键或左键单击时，我想重现拖动效果。 例如，我希望能够在我不断按空格键时开始拖动地图。

我已经测试了许多功能，例如在 Leaflet Map 上调用“mousedown”、“mouseup”、“click”、“drag”、“dragstart”事件，但没有任何反应；事件调用正确，但拖拽事件没有发生。

我仍然阻止它，网络似乎没有搜索这个功能：o

感谢您的帮助！ 问候

【参考方案1】：

您可以轻松添加事件侦听器来检测何时按住空格键。但是，您需要有一些方法来告诉地图向哪个方向移动。假设您也希望通过键盘完成此操作，这里是一些示例代码，用于在按住空格键时通过箭头键添加/删除滚动下来。

function scrollMap(e) 
  const key = e.key;
  if (key == 'ArrowUp')
   //scroll map 100px up, or whatever you want
  
  //repeat for other arrow keys, or inputs of your choice


document.addEventListener('keydown', (event) => 
  const key = event.code;
  if (key == 'Space')
    listen();
  
 );

document.addEventListener('keyup', (event) => 
  const key = event.code;
  if (key == 'Space')
    stopListen();
   
 );

function listen()
  document.addEventListener('keypress', scrollMap);      


function stopListen()
   document.removeEventListener('keypress', scrollMap);

注意事项

1) 根据您的页面布局，将事件附加到地图元素而不是文档可能会更好

2) event.code 与 event.key 等的选择将取决于您所针对的浏览器。请参阅here 了解更多信息

3) 您可能希望使用 shift / ctrl / alt 而不是空格键，因为它们是内置在键盘事件中的，因此更容易检测和使用跨浏览器。请参阅here 了解更多信息

【讨论】：

您好！感谢您的回复。其实我没有正确解释问题：/我想保留移动光标产生的拖动效果。我不想将我的地图拖动固定数量的像素。默认的键盘箭头已经做得很好了。我只想以不同的方式调用拖动事件，例如按空格键并通过移动鼠标拖动地图。我刚刚尝试了另一件事：我在“window”对象上附加了事件侦听器以跟踪“mousemove”事件，并通过mouseEvent的movementX和movementY使用panBy（）方法拖动我的地图。

如果您只想通过按住空格键启用/禁用标准鼠标拖动，则只需在上面的 document.addEventListener 函数中设置 yourMap.dragging.enable() 或 disable()的 listen() / stopListen() 如果您的地图是使用 dragging:false 选项集创建的，那么上面将只允许在按住空格键时通过拖动鼠标来移动地图。这是正确的 - 这是你想要做的吗？

是的，我想这样做，无需在地图上单击（左/右单击）即可开始拖动。

如果您不想使用键盘或鼠标移动来平移地图，您如何期望用户能够交流他们希望地图移动到的位置？