在leaflet.js地图上叠加文本框

Question

这可能是一个非常简单的问题，但我在其他地方搜索答案都没有找到！

我如何将一个简单的文本框叠加在Leaflet地图上，在地图加载时加载（不固定在地图上的任何点）-例如，在实际地图对象中提供标题和更多信息。 什么都不需要太花哨。

- jmk

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);

- Kyouma

---

这个代码能够正常运行。您能否添加一个关于如何在后面更新/更改文本的示例呢？ - 576i

使用jQuery，$("#info_text")[0].innerHTML = '新文本' - Kyouma

这让我开始了，但是我遇到了Tyescript错误。请看下面我的答案，有一个更整洁的解决方案。 - undefined

Answer 2

您有两个简单的选项，可以扩展一个新的L.Control并将其放置在地图窗口的四个角之一，并通过onAdd方法创建内容，或者将L.DivIcon放置在地图上与L.Marker一起，可以是地理坐标或基于容器尺寸的坐标。如果要使它像“框”一样，只需根据需要添加一些CSS，例如一些padding、background-color等。

- snkashis

---

谢谢，我假定需要某种控制方法。这听起来合适吗？https://dev59.com/MIfca4cB1Zd3GeqPj4fI#28319456 - jmk

Answer 3

继续上面@Kyouma的回答，以下方法更简单，不会产生任何TypeScript错误：

    let textbox   = L.Control.extend({
        onAdd: function() {
            
        var text = L.DomUtil.create('div');
        text.id = "info_text";
        text.innerHTML = "<h2>" + your text + "</h2>"
        return text;
        },

    });
    new textbox({ position: 'topleft' }).addTo(map);

- quilkin