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

Question

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

我想知道是否有一种非hacky方式通过api来实现特殊的游标行为而不需要重新设计所有内容.

这就是我试图做的,#map是传单地图的容器div.

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

Answer 1

编辑5.18.2017:通过Leaflet Framework原始CSS和Javascript(推荐)

我正在查看BoxZoom插件的源代码,并注意到他们使用Leaflet的内置DOM mutators的方法,并想在这里推广它......这当然是最好的做法.

示例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映射游标,如下所示:

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

Answer 2

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;
}

Answer 3

设置为十字线：

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

将其重置回来：

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