这似乎是一个非常简单的问题,但我已经在其他地方寻找答案,没有运气!如何将一个简单的文本框叠加到在Map加载时加载的传单Map上(不固定到Map上的任何点)-例如,在实际Map对象中给予标题和更多信息。没什么特别的
lrpiutwd1#
我知道这是旧的,但这里有一些示例代码,必要的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);
nc1teljy2#
你有两个简单的选择,扩展一个新的L.Control,并将其放置在Map窗口的四个角之一,并在onAdd方法中创建内容,或者将L.DivIcon放置在Map上的任何地方,并根据地理坐标或容器的尺寸坐标放置L.Marker。使其像“盒子”一样只需要包含一点你认为合适的CSS,比如一些padding,background-color等。
L.Control
onAdd
L.DivIcon
L.Marker
padding
background-color
5ktev3wc3#
根据@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);
3条答案
按热度按时间lrpiutwd1#
我知道这是旧的,但这里有一些示例代码,必要的CSS:
nc1teljy2#
你有两个简单的选择,扩展一个新的
L.Control
,并将其放置在Map窗口的四个角之一,并在onAdd
方法中创建内容,或者将L.DivIcon
放置在Map上的任何地方,并根据地理坐标或容器的尺寸坐标放置L.Marker
。使其像“盒子”一样只需要包含一点你认为合适的CSS,比如一些padding
,background-color
等。5ktev3wc3#
根据@Kyouma的回答,下面更简单,不会生成任何TypeScript错误: