MapBox:鼠标悬停时标记未显示可点击的光标 [英] MapBox: Markers not showing clickable cursor on mouseover

问题描述

我正在从小册子+ cloudmade迁移到mapbox，并在必要时对我的代码进行了较小的重写.我正在刷新地图，在上一期中，最简单的方法是将每个标记添加到其自己的图层中，然后在刷新时删除所有图层并重新绘制标记.

I am moving from leaflet+cloudmade to mapbox and have been doing minor rewrites to my code where necessary. I am refreshing my map and in my previous installment it was easiest to add each marker in to it's own layer and then on refresh to remove all layers and redraw the markers.

这是我当前的代码:

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);
}

我怀疑这与问题有关，即当我将鼠标光标放在标记上时，它停留为手(可拖动)，而不是变成尖的手指，这意味着标记是可单击的.单击可以正常工作，但不是很直观.如何将手变成尖的手指?

I suspect this has something to do with the problem, which is that when I put my mouse cursor over a marker, it stays as a hand (draggable) instead of changing to be a pointy finger, meaning the marker is clickable. Clicking works fine, but it's not very intuitive. How do I change the hand to pointy finger?

推荐答案

也遇到同样的问题.在mapbox网站上进行了CSS的快速检查，他们似乎在其站点范围的CSS文件(不是特定于地图)中使用CSS规则对其进行了修复.通过将其添加到我的站点范围的CSS中，我能够使用相同的方法解决此问题.

Ran into the same problem also. Did a quick check of CSS on the mapbox site, and they seem to fix it using a css rule in their sitewide css file (not map specific). I was able to fix the problem using the same approach, by adding this to my sitewide css.

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

我已经将默认的leaflet.css与默认的mapbox.css进行了比较，并且传单中包含了

I have compared the default leaflet.css with the default mapbox.css and leaflet includes this

.leaflet-clickable {
    cursor: pointer;
    }

而mapbox没有.

这篇关于MapBox:鼠标悬停时标记未显示可点击的光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！