我正在尝试在按下某个控制按钮时修改默认光标图标。虽然我通过在容器 div 上使用 css 取得了部分成功,但这样做会覆盖移动光标状态,这是我不想要的。我的意思是在地图上移动时不再出现移动图标(但在标记上时不会出现!)。
我想知道是否有一种通过 api 实现特殊光标行为而不重新定义所有内容的非 hacky 方式。
这就是我试图做的,#map 是传单地图的容器 div。
#map[control=pressed] {
cursor: url('..custom.png');
}
我正在尝试在按下某个控制按钮时修改默认光标图标。虽然我通过在容器 div 上使用 css 取得了部分成功,但这样做会覆盖移动光标状态,这是我不想要的。我的意思是在地图上移动时不再出现移动图标(但在标记上时不会出现!)。
我想知道是否有一种通过 api 实现特殊光标行为而不重新定义所有内容的非 hacky 方式。
这就是我试图做的,#map 是传单地图的容器 div。
#map[control=pressed] {
cursor: url('..custom.png');
}
编辑 5.18.2017:通过 Leaflet Framework 的原始 CSS 和 Javascript(推荐)
我正在查看BoxZoom 插件的源代码,并注意到他们使用Leaflet 的内置 DOM 突变器的方法,并想在这里推广它……这当然是最佳实践。
在您的 CSS 中某处包含这样的类..
.leaflet-container.crosshair-cursor-enabled {
cursor:crosshair;
}
当您想启用十字准线时,请在您的 JS 中执行此操作。
// Assumes your Leaflet map variable is 'map'..
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');
然后,当您想禁用十字准线时,请在您的 JS 中执行此操作。
L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled');
原始答案:地图级十字准线
@scud42 让我走上了正确的道路。您可以使用 JQuery 来更改 Leaflet 地图光标,如下所示:
$('.leaflet-container').css('cursor','crosshair');
稍后,当您想要重置地图光标时,您可以这样做:
$('.leaflet-container').css('cursor','');
编辑 1.21.2016:按功能十字准线
您还可以为支持该className
选项的单个要素启用十字准线,例如多边形或要素顶点等。
这是一个可拖动顶点的示例,它将切换指针十字准线(jsfiddle):
var svg_html_default = '<div style="margin:0px;padding:0px;height:8px;width:8px;border-style:solid;border-color:#FFFFFF;border-width:1px;background-color:#424242"</div>';
var default_icon = L.divIcon({
html: svg_html_default,
className: 'leaflet-mouse-marker',
iconAnchor: [5,5],
iconSize: [8,8]
});
var m = new L.marker([33.9731003, -80.9968865], {
icon: default_icon,
draggable: true,
opacity: 0.7
}).addTo( map );
m.on("mouseover",function(){$('.leaflet-mouse-marker').css('cursor','crosshair');});
m.on("mouseout",function(){$('.leaflet-mouse-marker').css('cursor','');});
Leaflet 的样式允许您更改某些光标行为。将这些放在本地 CSS 中以进行更改。
/* Change cursor when mousing over clickable layer */
.leaflet-clickable {
cursor: crosshair !important;
}
/* Change cursor when over entire map */
.leaflet-container {
cursor: help !important;
}
设置为十字准线:
document.getElementById('map').style.cursor = 'crosshair'
重新设置它:
document.getElementById('map').style.cursor = ''
使用active
伪类。
#map:active {
cursor: url('..custom.png');
}
为了覆盖光标,您可能需要使用 css3 属性user-select: none
,以便在拖动元素时不会在文本和默认光标之间切换。JSFiddle 中也显示了该实现。
这对我有用:
// CSS first. Add this to leaflet stylesheet.
.leaflet-interactive.wait-cursor-enabled {
cursor: wait !important;
}
// JS select from map container and add class to each element
let map = L.map('map');
let els = map.getContainer().querySelectorAll('.leaflet-interactive');
for(let el of els){
el.classList += ' wait-cursor-enabled';
}
//JS remove class once no longer needed
let els = map.getContainer().querySelectorAll('.leaflet-interactive.wait-cursor-enabled');
for(let el of els){
el.classList.remove("wait-cursor-enabled");
}
$('.leaflet-container').css('cursor','crosshair');