在 Leaflet.js 地图上覆盖文本框

Question

This might seem a very simple question, but I've searched elsewhere for the answer with no luck!

How do I overlay a simple text box on to a Leaflet map that loads when the map loads (not fixed to any point on a map) - for example, to give a title and more information within the actual map object. Nothing fancy.

Answer 1

I know this is old, but here's some sample code, CSS as necessary:

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