javascript - 如何更改传单 map 中的默认光标？

Question

我正在尝试修改按下某个控制按钮时的默认光标图标。虽然我通过在容器 div 上使用 css 取得了部分成功，但这样做会覆盖移动光标状态，这是我不想要的。我的意思是，在 map 中移动时，移动图标不再出现(但在标记上时不会出现!)。

我想知道是否有一种非 hacky 的方法可以通过 api 实现特殊的光标行为，而无需重新定义所有内容。

这就是我尝试做的，#map 是传单 map 的容器 div。

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

Answer 1

编辑2017年5月18日:通过Leaflet Framework使用原始CSS和Javascript(推荐)

我正在查看 the BoxZoom plugin 的源代码并注意到他们使用 Leaflet's built-in DOM mutators 的方法并想在这里推广它......这当然是最佳实践。

Example 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');

<小时/>

原始答案: map 级十字线

@scud42 让我走上了正确的道路。您可以使用 JQuery 来更改 Leaflet map 光标，如下所示:

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

之后，当您想要重置 map 光标时，可以执行以下操作:

$('.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','');});