在 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等。