如何在按住空格键时仅在Leaflet中启用地图拖动?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在按住空格键时仅在Leaflet中启用地图拖动?相关的知识,希望对你有一定的参考价值。
Leaflet贴图的默认行为是仅使用鼠标按下拖动视图。我想只在按下空格键的情况下才能用鼠标拖动。我需要鼠标拖动而没有空格键来做其他事情而不是拖动视图。我想用它选择实体,比如在Windows桌面上,你可以通过鼠标拖动来选择文件。
我喜欢有关如何实现这种行为的一些帮助:)
答案
按下空格键时,此示例将能够拖动。对于仅使用鼠标拖动,您需要配置其库。或者编写一些脚本来修改鼠标拖动事件。希望这会有所帮助。
// Initialize leaflet map
var map = L.map('map').setView([40.7128, -74.0060], 7);
var googleTile = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: ''
}).addTo(map);
// Disable map dragging event (default)
map.dragging.disable();
// Keydown and keyup event
document.body.onkeydown = function(e){
if(e.keyCode == 32){
map.dragging.enable();
}
}
document.body.onkeyup = function(e){
if(e.keyCode == 32){
map.dragging.disable();
}
}
#map { width: 300px; height: 150px; }
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<strong>Press your 'spacebar' key to drag</strong>
<div id="map"></div>
以上是关于如何在按住空格键时仅在Leaflet中启用地图拖动?的主要内容,如果未能解决你的问题,请参考以下文章
Android - 无需在地图 api v2 中按住即可拖动标记
Leaflet MarkerCluster removeOutsideVisibleBounds无效
如何在 iOS 11 的 UITextfield 中启用拖动