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

Question

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

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

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

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

原文由 Marco Toniut 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑 5.18.2017：通过 Leaflet Framework 的原始 CSS 和 Javascript（推荐）

我正在查看 BoxZoom 插件 的源代码并注意到他们使用 Leaflet 的内置 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 地图光标：

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

原文由 elrobis 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 scud42 发布，翻译遵循 CC BY-SA 3.0 许可协议