Leaflet: Set HTML Block wie L.ImageOverlay

Question

Ist es möglich eine Ebene wie imageOverlay mit html Markup in Leaflet map einzubetten? Vielleicht mit einem Plugin? Ich habe versucht, es mit Popup zu setzen, aber ich brauche mehr Kontrolle über die X- und Y-Koordinaten. Es ist also keine Lösung für meinen Fall.

Answer 1

Wenn Sie die Leaflet tutorials auf lesen, wie Leaflet zu erweitern und Plugins machen, und haben einen Blick auf die source code for L.ImageOverlay, wird die Antwort ganz einfach:

L.HtmlBlockOverlay = L.ImageOverlay.extend({ 
    initialize: function(bounds, options) { 
    return L.ImageOverlay.prototype.initialize.call(this, null, bounds, options); 
    }, 

    _initImage: function() { 
    var block = this._image = L.DomUtil.create('div', 'leaflet-image-layer' + 
               (this._zoomAnimated ? ' leaflet-zoom-animated' : '')); 

    if (this.options.className) { L.DomUtil.addClass(block, this.options.className); } 
    block.innerHTML = this.options.html; 
    } 
}); 


var blockOverlay = new L.HtmlBlockOverlay(bounds, { 
    html: 'Hello world!', 
    className: 'hello-world-box' 
}).addTo(map); 

ein working example See.