如何使Leaflet弹出窗口跟随光标的位置移动？

如何解决如何使Leaflet弹出窗口跟随光标的位置移动？

我的弹出窗口设置为在mouSEOver上打开，并且我的地图上的图标很大。现在，当光标移到图标上时，弹出窗口在图标中间保持静止。当光标位于相关图标内时，弹出窗口是否可能随着光标的移动而移动？怎么样？

我正在尝试通过NYT实现类似this的效果，但是要使用Leaflet和markerCluster插件。

相关代码：

var markers = L.markerClusterGroup( {
....

    iconCreateFunction: function (cluster) {

        cluster.bindPopup(stateBlurb,{offset: new L.Point(0,-15)});
       
        cluster.on('mouSEOver',function (e) {
            this.openPopup();
        });

        cluster.on('click',function (e) {
            this.openPopup();
        });

        cluster.on('clickout',function (e) {
            this.closePopup();
        });

        return L.divIcon({ 
          html: '<div><span>' + stateName + '</span></div>',className: `cluster ${classNameSize} ${classNameColor}`,iconSize: null,});

    },});

解决方法

有几种解决方法；其中之一是依靠the openPopup(latlng) method以及Leaflet-decorated mouse events的latlng属性和mousemove事件，例如：

var circle = L.circleMarker([0,0],{radius: 200}).addTo(map);
circle.bindPopup('Hello circle');

circle.on('mouseover',function(ev){ circle.openPopup(ev.latlng); });
circle.on('mousemove',function(ev){ circle.openPopup(ev.latlng); });
circle.on('mouseout',function(){ circle.closePopup(); });

这样做的缺点是，如果/当用户将指针移到弹出窗口上方时，将触发mouseout事件，从而使弹出窗口有效闪烁。这可以通过利用the pointer-events CSS property来解决，例如：

/* JS */
circle.bindPopup('Hello circle',{className: 'popup-with-no-events'});

/* CSS */
.popup-with-no-events {
    pointer-events: none;
}

查看working example。