如何更改传单地图中的默认光标？ [英] How do I change the default cursor in leaflet maps?

问题描述

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

I am trying to modify the default cursor icon when a certain control button is pressed. Although I was partially successful by using css on the container div, doing this overrides the move cursor state, which is something I do not want. What I mean with this is that the move icon no longer appears while moving through the map (but not when on markers!).

我想知道是否有是一种非hacky方式通过api来实现特殊的游标行为而不需要重新划分一切。

I'd like to know if there is a non-hacky way through the api to achieve special cursor behaviour without redifining everything.

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

This is what I tried to do, #map is the container div for the leaflet map.

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

推荐答案

编辑5.18。 2017：通过Leaflet Framework原始CSS和Javascript（推荐）

我正在浏览 BoxZoom插件并注意到他们的方法使用 Leaflet内置的DOM mutators 并希望在这里推广它......这无疑是最好的做法。

I was looking through the source code for the BoxZoom plugin and noticed their approach using Leaflet's built-in DOM mutators and wanted to promote it here...this is certainly the best practice.

示例jsfiddle

CSS中的某处包含一个类像这样......

Somewhere in your CSS include a class like this..

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

如果要启用十字准线，请在JS中执行此操作。

When you want to enable crosshairs, do this in your JS..

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

然后，当你想要禁用十字准线时，在你的JS中执行此操作..

Then, when you want to disable crosshairs, do this in your JS..

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

---

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

@ scud42让我走上了正确的道路。您可以使用JQuery更改Leaflet映射游标，如下所示：

@scud42 got me on the right path. You can use JQuery to change the Leaflet map cursor like this:

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

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

Then later, when you want to reset the map cursor, you can do this:

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

---

编辑1.21.2016：Per-功能十字准线

您还可以为支持 className 选项的各个功能启用十字准线，例如

You can also enable crosshairs for individual features supporting the className option, such as a polygon, or feature vertices, etc.

这是一个可拖动指针十字准线的可拖动顶点的示例（ jsfiddle ）：

Here's an example of a draggable vertice that will toggle pointer crosshairs (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','');});

这篇关于如何更改传单地图中的默认光标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！