27

特定のコントロールボタンが押されたときにデフォルトのカーソルアイコンを変更しようとしています。コンテナdivでcssを使用することで部分的に成功しましたが、これを行うと、カーソルの移動状態がオーバーライドされます。これは、私が望まないことです。これが意味するのは、マップ内を移動している間は移動アイコンが表示されなくなったことです（ただし、マーカー上では表示されません）。

すべてを再定義せずに特別なカーソル動作を実現するための、APIを介したハッキーではない方法があるかどうかを知りたいです。

これは私がやろうとしたことです。＃mapはリーフレットマップのコンテナdivです。

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

6 に答える 6

52

編集 5.18.2017: Leaflet Framework 経由の生の CSS と Javascript (推奨)

BoxZoom プラグインのソース コードを調べていたところ、Leaflet の組み込み DOM mutatorsを使用したアプローチに気付き、ここで宣伝したいと思いました...これは確かにベスト プラクティスです。

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-25T16:52:26.930 に答える
4

クロスヘアに設定:

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

元に戻す:

document.getElementById('map').style.cursor = ''
于 2015-08-04T16:44:02.823 に答える
2

active擬似クラスを使用します。

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

JSFiddle

カーソルをオーバーライドするには、おそらく css3 属性を使用しuser-select: noneて、要素をドラッグしたときにテキスト カーソルとデフォルト カーソルが切り替わらないようにすることをお勧めします。その実装は JSFiddle にも示されています。

于 2012-12-31T23:29:37.810 に答える