MapBox：マウスオーバーのクリック可能なカーソルを表示しないマーカー

StackOverflow https://stackoverflow.com//questions/23056840

  •  23-12-2019
  •  | 
  •  

質問

Leaflet + CloudMadeからMapBoxに移動し、必要に応じてマイクロ書き換えをしています。私はマップを更新しています。

これは私の現在のコードです：

function setLeafletMarker(lat, lng, iconType, popupHTML) {

    popupHTML = typeof popupHTML !== 'undefined' ? popupHTML : "";
    var LamMarker = new L.Marker([lat, lng], { icon: iconType }); //.on('click', markerClick); ;

    markers.push(LamMarker);

    LamMarker.bindPopup(popupHTML);
    map.addLayer(LamMarker);
}
.

私はこれが問題を抱えていることを疑っている。クリックするとうまくいきますが、それほど直感的ではありません。手を尖っている指に変更するのですか？

役に立ちましたか？

解決

も同じ問題に走った。MapBoxサイト上のCSSのクイックチェックを行い、それらはそれらのSiteWide CSSファイルのCSSルールを使用してそれを修正しているようです（マップ固有のものではありません）。私は同じアプローチを使って問題を解決することができました。これを私のサイトwide cssに追加します。

.leaflet-overlay-pane path,
.leaflet-marker-icon {
  cursor: pointer;
}
.

デフォルトのLeaflet.cssをデフォルトのMapBox.cssとLeafletには、この

が含まれています。 
.leaflet-clickable {
    cursor: pointer;
    }
.

Mapboxはそうではありません。

他のヒント

マウスオーバーイベントとマウスアウトイベントに動作を追加するだけです。

LamMarker.on("mouseover", function(e) {
    document.getElementById('map').style.cursor = "pointer";
}).on("mouseout", function(e) {
    document.getElementById('map').style.cursor = "grab";
});
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top