javascript 在leaflet.jsMap上叠加文本框

3phpmpom  于 2023-10-14  发布在  Java
关注(0)|答案(3)|浏览(142)

这似乎是一个非常简单的问题,但我已经在其他地方寻找答案,没有运气!
如何将一个简单的文本框叠加到在Map加载时加载的传单Map上(不固定到Map上的任何点)-例如,在实际Map对象中给予标题和更多信息。没什么特别的

lrpiutwd

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

nc1teljy2#

你有两个简单的选择,扩展一个新的L.Control,并将其放置在Map窗口的四个角之一,并在onAdd方法中创建内容,或者将L.DivIcon放置在Map上的任何地方,并根据地理坐标或容器的尺寸坐标放置L.Marker。使其像“盒子”一样只需要包含一点你认为合适的CSS,比如一些paddingbackground-color等。

5ktev3wc

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

相关问题