如何解决带滚动条的传单上下文菜单
我已将滚动条添加到我的传单地图中。我们可以通过右键单击地图来查看它。但我无法滚动上下文菜单列表。每当我尝试滚动上下文菜单列表时，它就会消失。所以首先，我需要右键单击地图以查看上下文菜单列表。然后，我想使用滚动条检查列表中的所有项目。第一部分正在工作，但第二部分没有像我想要的那样工作。这是我的代码，
var map,cm,ll = new L.LatLng(-36.852668,174.762675),ll2 = new L.LatLng(-36.86,174.77);
map = L.map('map',{
center: ll,zoom: 15,contextmenu: true,contextmenuWidth: 140,contextmenuItems: [
{
text: 'Show coordinates'
},{
text: 'Center map here'
},'-',{
text: 'Zoom in'
},{
text: 'Zoom out'
},{
text: 'A'
},{
text: 'B'
},{
text: 'C'
},{
text: 'D'
},{
text: 'E'
},{
text: 'F'
}
]
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker(ll,{
contextmenu: true,contextmenuItems: [{
text: 'Marker item',index: 0
},{
separator: true,index: 1
}]
}).addTo(map);
L.marker(ll2,contextmenuInheritItems: false,contextmenuItems: [{
text: 'Marker item'
}]
}).addTo(map);/* To make contextmenu scrollable */
.leaflet-contextmenu {
height: 80px;
overflow: auto;
}<!doctype html>
<html>
<head>
<title>Leaflet Context Menu</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aratcliffe/Leaflet.contextmenu/dist/leaflet.contextmenu.min.css"/>
</head>
<body>
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/aratcliffe/Leaflet.contextmenu/dist/leaflet.contextmenu.min.js"></script>
</body>
</html>提前致谢！
解决方法
最后，我找到了自己的解决方案。问题出在 MouseEvent 中。每当我想放大时，就会触发地图的鼠标事件！因此，我为上下文菜单容器添加了我的侦听器以启用和禁用滚动。这是我的解决方案，
var map,cm,ll = new L.LatLng(-36.852668,174.762675),ll2 = new L.LatLng(-36.86,174.77);
map = L.map('map',{
center: ll,zoom: 15,contextmenu: true,contextmenuWidth: 140,contextmenuItems: [
{
text: 'Show coordinates'
},{
text: 'Center map here'
},'-',{
text: 'Zoom in'
},{
text: 'Zoom out'
},{
text: 'A'
},{
text: 'B'
},{
text: 'C'
},{
text: 'D'
},{
text: 'E'
},{
text: 'F'
}
]
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker(ll,{
contextmenu: true,contextmenuItems: [{
text: 'Marker item',index: 0
},{
separator: true,index: 1
}]
}).addTo(map);
L.marker(ll2,contextmenuInheritItems: false,contextmenuItems: [{
text: 'Marker item'
}]
}).addTo(map);
var isContextMenu = false;
map.on('contextmenu.show',function (e) {
isContextMenu = true;
var map = document.getElementById('map');
var container = e.contextmenu._container;
// to scroll the context-menu div on the map
container.addEventListener('mousedown',function () {
mouseDown(container);
},false);
container.addEventListener('mouseout',function () {
mouseOut(container);
},false);
// has a target
if (e.relatedTarget) {
// target has id
if (e.relatedTarget.id) {
window.relatedContextMenuTarget = e.relatedTarget;
}
}
});
function mouseDown(contextMenu) {
if (isContextMenu === true) {
contextMenu.style.display = "block";
isContextMenu = false;
}
}
function mouseOut(contextMenu) {
if (isContextMenu === false) {
contextMenu.style.display = "none";
}
}/* To make contextmenu scrollable */
.leaflet-contextmenu {
height: 80px;
overflow: auto;
}<!doctype html>
<html>
<head>
<title>Leaflet Context Menu</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aratcliffe/Leaflet.contextmenu/dist/leaflet.contextmenu.min.css"/>
</head>
<body>
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/aratcliffe/Leaflet.contextmenu/dist/leaflet.contextmenu.min.js"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。