Javascript 如何更改传单地图中的默认光标？

当按下某个控制按钮时，我试图修改默认的光标图标。 虽然我在container div上使用css取得了部分成功，但这样做会覆盖move cursor状态，这是我不希望看到的。我的意思是，在地图中移动时，移动图标不再出现（但在标记上时不会出现）

我想知道是否有一种通过api实现特殊游标行为的非黑客方式，而无需重新定义所有内容

这就是我试图做的，#map是传单map的container div

#映射[控制=按下]{
游标：url（“…custom.png”）；
}

使用

活动的

伪类

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

---

要覆盖光标，您可能需要使用css3属性

user select:none

，以便在拖动元素时不会在文本和默认光标之间切换。JSFIDLE中也显示了该实现。

传单的样式允许您更改某些光标行为。将这些内容放在本地CSS中进行更改

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

---

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

我浏览了源代码，注意到他们的方法在使用，并希望在这里推广……这当然是最佳实践

CSS中的某个地方包含这样的类

.leaflet-container.crosshair-cursor-enabled {
    cursor:crosshair;
}

如果要启用十字光标，请在JS中执行此操作

// Assumes your Leaflet map variable is 'map'..
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');

L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled');

然后，当您想要禁用十字光标时，请在JS中执行此操作

// Assumes your Leaflet map variable is 'map'..
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');

L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled');

---

原始答案：地图级十字准线

@scud42让我走上了正确的道路。您可以使用JQuery更改传单地图光标，如下所示：

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

随后，当您要重置地图光标时，可以执行以下操作：

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

---

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

还可以为支持

className

选项的单个要素（例如多边形或要素顶点等）启用十字光标

下面是一个可拖动vertice的示例，它将切换指针十字光标（）：

var svg\u html\u default='设置为十字线：

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

将其重置回：

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

这就是我的工作原理：

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

当一个控件按钮被禁用时，是否有任何类被添加到该按钮？我尝试按照您的建议进行操作，但api似乎破坏了伪类行为。虽然，在地图控制上它正在工作（这是我不想发生的事情），但你知道吗？@snowgage这个问题已经很久没有提了，我都不记得了。我相信在解决这个问题之前，我最终还是做了别的事情。虽然我正在考虑尽快回到地图绘制现场；如果同样的问题再次出现，并且我确实找到了答案，我会确保将其张贴在这里。虽然这对我来说已经过时很长时间了，但我认为这是正确的答案。谢谢你让我来证实我的工作行为。