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沒有顯示在標記上

回答

相關問題