Answers:
如果需要显示标记的弹出窗口,则可以使用标记bindPopup方法。
然后,您将拥有更多控制权,它将自动绑定到您的标记。
在下面的示例中,您可以在用户将鼠标悬停在上方时显示弹出窗口,而在用户将鼠标悬停在弹出窗口时将其隐藏:
marker.bindPopup("Popup content");
marker.on('mouseover', function (e) {
this.openPopup();
});
marker.on('mouseout', function (e) {
this.closePopup();
});
注意:当您将鼠标悬停在弹出窗口上时,可能会遇到弹出窗口关闭的问题,因此您可能需要调整其中的弹出锚点(请参见弹出设置),以使弹出窗口离标记本身稍远一些,因此不会太容易消失了。
这将有助于在标记鼠标悬停时显示弹出窗口
marker.on('mouseover', function(e) {
//open popup;
var popup = L.popup()
.setLatLng(e.latlng)
.setContent('Popup')
.openOn(map);
});
这不是特定于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));
}
L.MarkerCluster
实例中迭代标记…我的答案清楚地显示了如何在悬停时绑定弹出窗口集合。如果您想知道如何从集群中获取集合,这是另一回事。
如果使用的是Leaflet 1.3.x,则工具提示绑定是内置方法。
http://leafletjs.com/reference-1.3.0.html#tooltip
var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
polyline.bindTooltip("tool tip is bound");
bindTooltip()
也适用于单个标记。
就拥有“可用于更多标记”的解决方案而言,这就是我对从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;
}
});