如何更改小册子地图中的默认光标？

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

我想知道是否有一个非hacky的方式通过api实现特殊的光标行为，而不需要重新整理所有内容。

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

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

来源

2012-12-31 Marco Toniut

当控制按钮被禁用时，任何类已被添加到按钮？ –

编辑2017年5月18日：原始CSS和Javascript通过传单框架（推荐）

我一直在寻找通过源代码the BoxZoom plugin，发现使用Leaflet's built-in DOM mutators他们的做法，并希望在这里推广。 ..这当然是最好的做法。

Example 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-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','');});

来源

2015-02-25 16:52:26 elrobis

尽管对我来说已经很久没有过时了，但我将其视为正确答案。感谢jsfiddle对我的确认工作行为。 –

使用active伪类。

#map:active { 
    cursor: url('..custom.png'); 
}

JSFiddle

用于覆盖你可能会想使用CSS3属性user-select: none使得元件上拖动时，它不会在文本和默认光标之间切换光标。该实现也显示在JSFiddle中。

来源

2012-12-31 23:29:37

我尝试了以下建议，但似乎api正在打破伪类行为。虽然在地图控件上它正在工作（这不方便是我不想发生的事情）。 –

你有没有想过这个？ – snowgage

@snowgage自从这个问题已经很久了，我甚至都不记得了。我相信在解决这个问题之前，我已经走到了别的地方。尽管我正在考虑尽快回到测绘现场，如果同样的问题再次出现，我确实找到了答案，我将确保将它发布在这里 –

单张样式允许您更改某些游标行为。把这些放在你的本地CSS中进行更改。

/* Change cursor when mousing over clickable layer */ 
.leaflet-clickable { 
    cursor: crosshair !important; 
} 
/* Change cursor when over entire map */ 
.leaflet-container { 
    cursor: help !important; 
}

来源

2014-11-26 17:24:44 scud42

设置为十字线：

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

重置它：

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

来源

2015-08-04 16:44:02 chelahmy

如何更改小册子地图中的默认光标？

回答

相关问题