如何更改在单张地图中的默认光标？(How do I change the default curso

我想，当按下某个控制按钮来修改默认光标图标。虽然我是部分成功使用在容器DIV + CSS，这样做会覆盖移动光标的状态，这是我不想要的。我的意思与此的是，移动图标，同时通过移动地图不再出现（但不上的标记时！）。

我想知道是否有通过API非哈克的方式来实现特殊光标行为，而不redifining一切。

这就是我试图做的，#map是单张地图的div容器。

#map[control=pressed] {
    cursor: url('..custom.png');
}

Answer 1:

编辑2017年5月18日：原始CSS和Javascript通过传单框架（推荐）

我一直在寻找通过对源代码的BoxZoom插件并使用发现他们的方法传单的内置DOM变异符和想在这里推广呢？这当然是最好的做法。

实例的jsfiddle

某处在你的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-container').css('cursor','crosshair');

再后来，当你想重置地图光标，你可以这样做：

$('.leaflet-container').css('cursor','');

编辑2016年1月21日：每功能十字线

您也可以为个别功能配套的十字线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','');});

Answer 2:

传单的款式让你改变一些光标行为。在您的本地CSS把这些做出改变。

/* Change cursor when mousing over clickable layer */
.leaflet-clickable {
  cursor: crosshair !important;
}
/* Change cursor when over entire map */
.leaflet-container {
  cursor: help !important;
}

Answer 3:

设置为十字线：

document.getElementById('map').style.cursor = 'crosshair'

重置回：

document.getElementById('map').style.cursor = ''

Answer 4:

使用active伪类。

#map:active {
    cursor: url('..custom.png');
}

的jsfiddle

对于覆盖光标你可能会想使用CSS3属性user-select: none ，使得元件上拖动时，它不会在文本和默认光标之间切换。这实现也显示在的jsfiddle。

Answer 5:

这是对我工作：

// 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");
}

文章来源: How do I change the default cursor in leaflet maps?