gpt4 book ai didi

javascript - Leaflet,重现/调用拖动事件

转载 作者:行者123 更新时间:2023-11-30 20:23:50 28 4
gpt4 key购买 nike

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

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

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

我还在阻止它,网络似乎没有搜索这个功能 :o

感谢帮助!问候

最佳答案

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

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) 根据您的页面布局,最好将事件附加到您的 map 元素而不是文档

2) event.code 与 event.key 等的选择取决于您的目标浏览器。参见 here了解更多信息

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

关于javascript - Leaflet,重现/调用拖动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51137807/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com