Leaflet.label没有显示在标记上

我有一组geoJSON点，并且它们附有相应的标签。Leaflet.label没有显示在标记上

var points = L.geoJson (null, { 
    onEachFeature: function (feature, layer) { 
     layer.options.riseOnHover=true; //tried adding this 
     layer.options.riseOffset=9999; //as well as this 
     layer.bindLabel(feature.properties["name"], {className: 'map-label'}); 
     L.setOptions(layer, {riseOnHover: true}); //this as well 
    } 
});

这是通过JSON文件中的每个功能并创建一组点的代码。现在，加标记到地图中的实际功能是这样的：

var addJsonMarkers = function() { 
    map.removeLayer(markers); 
    points.clearLayers(); 

    markers = new L.layerGroup(); 
    points.addData(dataJson); 
    markers.addLayer(points); 

    map.addLayer(markers); 

    return false; 
};

我遇到的问题是，无论什么我尝试添加（你可以看到我的意见），标签总是落后于标记，这不是预期的行为。

Screenshot of label behind the

我想在标签要在它上面。我试着手动更改map-label类中的z-index，以及riseOnHover这个似乎是解决方案的众多解决方案，但标签仍然存在。任何人看到我在做什么错了？

完整的代码可以看出here

来源

2014-12-03 wont_compile

你需要看看，看看标签被安装到什么窗格中的地图和移动它到标记上方的一个。您也可以查看标记的{optimized：false}（如果可用）。 – geocodezip 2014-12-03 22:40:04

它被附加到'leaflet-marker-pane'，作为div中所有标记列表中的最后一个元素。 – 2014-12-05 19:51:43

在bindLable选项指定popupPane为pane：

layer.bindLabel(
    feature.properties["name"], 
    { 
     className: 'map-label', 
     pane:'popupPane' 
    } 
);

在单张popupPane比markerPane所以你的标签将出现在标志的顶部。

有一个小文档的Leaflet.label的选项说明https://github.com/Leaflet/Leaflet.label

还要检查这个的jsfiddle：http://jsfiddle.net/L6kqu54a/

来源

2014-12-19 05:41:41 dkiselev

这是做到了。我在文档中忽略了这个选项，并在错误的地方寻找解决方案。谢谢！ – 2014-12-19 23:04:49

只需确认* options.pane ='popupPane'; *解决方案。我在LeafletJS 0.7.3和0.7.5中没有这个问题，但是当我切换到LeafletJS 1.0.0-beta时，它困扰了我。通过JS和/或CSS摆弄zIndex根本行不通。但使用options.pane可以。 – fris 2015-10-09 00:45:26

看看在bringToFront（）和bringToBack（）方法，创建用于标记一组函数，并把它备份，同时做与标签相反。或者如果你没有找到解决方案，你可以添加L.info来显示信息。看看这里也许这可能会有所帮助：http://leafletjs.com/reference.html#featuregroup-bringtofront 发布你的代码，所以我可以看看它。

来源

2014-12-04 18:58:14 Mensch

感谢您的回答。你可以在这里看看我的代码：http://pastebin.com/2iH3U0a7我对如何做更高级的东西并不是很熟悉，比如为标记和标签创建组函数，因为我依赖于这个小册子。标签插件及其'bindLabel（）'函数，所以我不确定背景中实际正在做什么。 – 2014-12-05 19:57:47

请尝试评论此内容：layer.on（{click：highlightFeature}）; – Mensch 2014-12-06 00:49:14

仍然一样。不过，我需要这个监听器，因为当点击该标记时，我会在右角看到一些很好的信息，并显示一些内容。 ''只是一个占位符。 – 2014-12-06 04:11:37

Leaflet.label没有显示在标记上

回答

相关问题