Javascript 如何更改传单地图中的默认光标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14106687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change the default cursor in leaflet maps?
提问by Marco Toniut
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!).
我试图在按下某个控制按钮时修改默认光标图标。虽然我在容器 div 上使用 css 取得了部分成功，但这样做会覆盖移动光标状态，这是我不想要的。我的意思是在地图上移动时不再出现移动图标（但在标记上时不会出现！）。
I'd like to know if there is a non-hacky way through the api to achieve special cursor behaviour without redifining everything.
我想知道是否有通过 api 的非hacky 方式来实现特殊的光标行为而无需重新定义所有内容。
This is what I tried to do, #map is the container div for the leaflet map.
这就是我试图做的，#map 是传单地图的容器 div。
#map[control=pressed] {
cursor: url('..custom.png');
}
回答by elrobis
Edit 5.18.2017: Raw CSS and Javascript via Leaflet Framework (recommended)
编辑 5.18.2017：通过 Leaflet 框架的原始 CSS 和 Javascript（推荐）
I was looking through the source code for the BoxZoom pluginand noticed their approach using Leaflet's built-in DOM mutatorsand wanted to promote it here...this is certainly the best practice.
我正在浏览BoxZoom 插件的源代码，并注意到他们使用Leaflet 的内置 DOM mutators 的方法，并想在这里推广它......这当然是最佳实践。
Somewhere in your CSS include a class like this..
在你的 CSS 中的某个地方包含一个这样的类..
.leaflet-container.crosshair-cursor-enabled {
cursor:crosshair;
}
When you want to enable crosshairs, do this in your JS..
当您想启用十字准线时，请在您的 JS 中执行此操作。
// Assumes your Leaflet map variable is 'map'..
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');
Then, when you want to disable crosshairs, do this in your JS..
然后，当您想禁用十字准线时，请在您的 JS 中执行此操作。
L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled');
Original Answer: Map-level Crosshairs
原答案：地图级十字准线
@scud42 got me on the right path. You can use JQuery to change the Leaflet map cursor like this:
@scud42 让我走上了正确的道路。您可以使用 JQuery 像这样更改传单地图光标：
$('.leaflet-container').css('cursor','crosshair');
Then later, when you want to reset the map cursor, you can do this:
然后，当你想重置地图光标时，你可以这样做：
$('.leaflet-container').css('cursor','');
Edit 1.21.2016: Per-feature Crosshairs
编辑 1.21.2016：每个功能的十字准线
You can also enable crosshairs for individual features supporting the classNameoption, such as a polygon, or feature vertices, etc.
您还可以为支持该className选项的单个要素启用十字准线，例如多边形或要素顶点等。
Here's an example of a draggable vertice that will toggle pointer crosshairs (jsfiddle):
这是一个可拖动顶点的示例，它将切换指针十字准线 ( 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','');});
回答by scud42
Leaflet's styles allow you to change some cursor behavior. Put these in your local CSS to make the change.
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;
}
回答by chelahmy
Set to crosshair:
设置为十字准线：
document.getElementById('map').style.cursor = 'crosshair'
Reset it back:
重新设置回来：
document.getElementById('map').style.cursor = ''
回答by Austin Brunkhorst
Use the activepseudo class.
使用active伪类。
#map:active {
cursor: url('..custom.png');
}
For overriding a cursor you will probably want to use the css3 attribute user-select: noneso that it doesn't toggle between the text and default cursor when dragging on the element. That implementation is also shown in the JSFiddle.
为了覆盖光标，您可能需要使用 css3 属性，user-select: none以便在元素上拖动时不会在文本和默认光标之间切换。该实现也显示在 JSFiddle 中。
回答by cityremade
This is what worked for me:
这对我有用：
// 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");
}
回答by saadat ali
$('.leaflet-container').css('cursor','crosshair');
