在鼠标悬停时显示弹出窗口,而不在使用Leaflet时显示弹出窗口?


37

在Leaflet中,是否可能在鼠标悬停而不是单击时打开弹出窗口?

一次仅适用于一个标记,但是我需要更多的标记:

marker.on('mouseover', function(e){
    marker.openPopup();
});

1
如果您有两个问题,请打开两个线程,以便分别回答。
昏暗

Answers:


43

如果需要显示标记的弹出窗口,则可以使用标记bindPopup方法。

然后,您将拥有更多控制权,它将自动绑定到您的标记。

在下面的示例中,您可以在用户将鼠标悬停在上方时显示弹出窗口,而在用户将鼠标悬停在弹出窗口时将其隐藏:

        marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });

注意:当您将鼠标悬停在弹出窗口上时,可能会遇到弹出窗口关闭的问题,因此您可能需要调整其中的弹出锚点(请参见弹出设置),以使弹出窗口离标记本身稍远一些,因此不会太容易消失了。


4
悬停在弹出窗口时保持可见的解决方案-jsfiddle.net/sowelie/3JbNY
rob-gordon

9

这将有助于在标记鼠标悬停时显示弹出窗口

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});

1
谢谢!这段代码帮助我解决了与此问题无关的问题。
Abbafei

6

这不是特定于Leaflet的问题,而是Javascript的问题。

将标记存储在集合中,然后将所有标记绑定openPopup'mouseover'事件。

例如,使用数组:

var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>

for (var i = 0; i < markers.length; i++) {
    var currentMarker = markers[i];
    currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
}

在评论中而不是在答案中发表意见:我认为,悬停打开的弹出窗口在地图上的可用性值得怀疑,根据定义,光标在其中徘徊很多。您是否真的希望用户在标记之间进行寻路,以最终达到他们想要的标记,但是每当他们尝试将光标移向目标时始终隐藏在弹出窗口之后?
MattiSG

不幸的是,这不是我的选择。我存储的标记像带有Leaflet MarkerCluster的新L.MarkerClusterGroup:var markers = new L.MarkerClusterGroup(); 您编写的代码也会为此工作吗?
逆流

@againstflow Erm,那么您应该更改您的问题。您不仅要问悬停时打开标记,还问如何在L.MarkerCluster实例中迭代标记…我的答案清楚地显示了如何在悬停时绑定弹出窗口集合。如果您想知道如何从集群中获取集合,这是另一回事。
MattiSG 2012年


4

就拥有“可用于更多标记”的解决方案而言,这就是我对从GeoJSON加载的点数据的每一层所做的工作:

var layerPopup;
featureLayer.on('mouseover', function(e){
    var coordinates = e.layer.feature.geometry.coordinates;
    var swapped_coordinates = [coordinates[1], coordinates[0]];  //Swap Lat and Lng
    if (map) {
       layerPopup = L.popup()
           .setLatLng(swapped_coordinates)
           .setContent('Popup for feature #'+e.layer.feature.properties.id)
            .openOn(map);
    }
});
featureLayer.on('mouseout', function (e) {
    if (layerPopup && map) {
        map.closePopup(layerPopup);
        layerPopup = null;
    }
});

只是好奇,FeatureLayer是什么类型的对象?看起来这是一个很好的解决方案。
Behr 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.