在 Leaflet.js 地圖上覆蓋文本框

Question

這似乎是一個非常簡單的問題，但我在其他地方尋找答案卻沒有運氣！

如何將一個簡單的文本框疊加到在地圖加載時加載的 Leaflet 地圖上（不固定到地圖上的任何點） - 例如，在實際地圖對象中提供標題和更多信息。 沒有什么花哨。

Answer 1

我知道這是舊的，但這里有一些示例代碼，必要時使用 CSS：

 L.Control.textbox = L.Control.extend({ onAdd: function(map) { var text = L.DomUtil.create('div'); text.id = "info_text"; text.innerHTML = "<strong>text here</strong>" return text; }, onRemove: function(map) { // Nothing to do here } }); L.control.textbox = function(opts) { return new L.Control.textbox(opts);} L.control.textbox({ position: 'bottomleft' }).addTo(map);

Answer 2

您有兩個簡單的選項，擴展一個新的L.Control並將其放置在地圖窗口的四個角之一中，其內容在onAdd方法內創建，或者將L.DivIcon放置在地圖上的任何位置，與L.Marker一起L.Marker ，無論是地理坐標還是基於容器尺寸的坐標。將它作為“盒子”就像你想要的那樣只包含一小部分CSS，比如一些padding ， background-color等。