Question

我正在从传单+ 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);
}

我怀疑这与问题有关，即当我将鼠标光标放在标记上时，它会保持为手（可拖动）而不是变为尖手指，这意味着标记是可点击的。点击工作正常，但它不是很直观。如何将手改为尖手指？

Answer 1

也遇到了同样的问题。快速检查了mapbox网站上的CSS，他们似乎在他们的sitewide css文件中使用css规则修复它（不是特定于地图的）。我能够使用相同的方法解决问题，将其添加到我的sitewide css。

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

我将默认的leaflet.css与默认的mapbox.css进行了比较，并且leaflet包含了这个

.leaflet-clickable {
    cursor: pointer;
    }

而mapbox没有。

Answer 2

一种方法是您可以将行为添加到mouseover和mouseout事件：

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

MapBox：鼠标悬停时没有显示可点击光标的标记

2 个答案: