我的项目使用 Angular 6 和 Leaflet 1.2。
当用户在 Leaflet Map 上保持右键或左键单击时，我想重现拖动效果。 例如，我希望能够在我不断按空格键时开始拖动地图。
我已经测试了许多功能，例如在 Leaflet Map 上调用“mousedown”、“mouseup”、“click”、“drag”、“dragstart”事件，但没有任何反应；事件调用正确，但拖拽事件没有发生。
我仍然阻止它，网络似乎没有搜索这个功能：o
感谢您的帮助！ 问候
【问题讨论】：
标签： javascript angular leaflet draggable drag
您可以轻松添加事件侦听器来检测何时按住空格键。但是，您需要有一些方法来告诉地图向哪个方向移动。假设您也希望通过键盘完成此操作，这里是一些示例代码，用于在按住空格键时通过箭头键添加/删除滚动下来。
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 了解更多信息
【讨论】：