传单:像L.ImageOverlay一样设置HTML块

Question

是否可以在传单地图中设置像图像叠加层一样嵌入html标记的图层？也许有插件？我尝试使用 Popup 设置它，但我需要对 X 和 Y 坐标进行更多控制。所以这不是我的情况的解决方案。

Answer 1

如果您阅读有关如何扩展传单和制作插件的传单教程，并查看L.ImageOverlay的源代码，答案变得非常简单：

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

请参阅工作示例。