如何更改小冊子地圖中的默認光標？

我試圖修改按下某個控制按鈕時的默認光標圖標。儘管我通過在容器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

如何更改小冊子地圖中的默認光標？

回答

相關問題