Question

我在项目中使用Angular 6和Leaflet 1.2。

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

我已经测试了许多功能，例如在Leaflet Map上调用'mousedown'，'mouseup'，'click'，'drag'，'dragstart'事件，但是什么也没有发生；该事件调用正确，但没有发生拖动事件。

我仍在阻止它，网络上似乎没有搜索此功能：o

感谢您的帮助！问候

Answer 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

传单，重现/呼叫拖动事件

1 个答案: