Overlaying a text box on a leaflet.js map

问题

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.

回答1:

You have two simple options, extend a new L.Control and place it in one of the four corners of the map window with content created inside the onAdd method, or place a L.DivIcon anywhere on the map alongside a L.Marker, by either geographical coordinates or coordinates based upon the dimensions of the container.Making it "box" like would just include a small bit of CSS as you see fit, like some padding,background-color, etc.

回答2:

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

来源：https://stackoverflow.com/questions/33767463/overlaying-a-text-box-on-a-leaflet-js-map