[英]don't change mouse icon when hovering over a marker
I have a map with a number of markers.我有一张带有许多标记的地图。 When a user clicks on one marker information for that marker is displayed on a side pane.
当用户单击一个标记时,该标记的信息会显示在侧窗格中。 To accomplish that I have added 'click' listeners to the markers and also store marker identifiers more or less as suggested in this SO answer .
为了实现这一点,我在标记中添加了“点击”侦听器,并或多或少地存储了标记标识符, 如此 SO answer 中所建议的。
Now, on certain modes I don't want the markers to be clickable (but still want them to appear on the screen).现在,在某些模式下,我不希望标记可点击(但仍希望它们出现在屏幕上)。 It is easy for me to remove all the 'click' listeners.
我很容易删除所有“点击”侦听器。 However, when I hover over them with my mouse, the icon does change from the "open palm" to the "pointed hand" confusing the user.
然而,当我用鼠标悬停在它们上面时,图标确实从“张开的手掌”变成了“尖头”,让用户感到困惑。 Upon investigating I see that the canvas class normally has the
leaflet-zoom-animated
class, but when I hover over a marker, the leaflet-interactive
class gets added.经过调查,我发现画布类通常具有
leaflet-zoom-animated
类,但是当我将鼠标悬停在标记上时,会添加leaflet-interactive
类。 I can change that cursor using, eg:我可以使用例如更改该光标:
.leaflet-interactive {
cursor: crosshair !important;
}
... but this has two problems: ...但这有两个问题:
If you can remove the click listener, I suppose that you can also add a css class to your marker.如果您可以删除单击侦听器,我想您还可以向标记中添加一个 css 类。 Here is an example http://jsfiddle.net/Mossart/w9830at1/7/ (look at the top marker)
这是一个示例http://jsfiddle.net/Mossart/w9830at1/7/ (查看顶部标记)
var breakside = [45.571601194035345, -122.65673562884331];
var marker1 = L.marker(breakside).addTo(map);
marker1._icon.classList.add("not-clickable");
CSS: CSS:
.not-clickable {
cursor: grab;
}
This works for L.circleMarker
objects on a canvas renderer:这适用于画布渲染器上的
L.circleMarker
对象:
marker.options.interactive = false;
Curiously, it doesn't work on a non-canvas renderer.奇怪的是,它不适用于非画布渲染器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.