Javascript 添加多个传单层会导致容器定位不准确

我有以下代码来扩展传单层以添加自定义层

L.CustomLayer = L.Layer.extend({
    initialize: function (latlng, options) {
        this._latlng = L.latLng(latlng);
        L.Util.setOptions(this, options);
    },
    onAdd: function (map) {
        this._div = document.createElement("div");
        this._div.style.padding = "8px";
        this._div.style.border = "2px solid grey";
        this._div.style.borderRadius = "2px";
        this.getPane().appendChild(this._div);
        this._update();
        map.on("zoomend viewreset", this._update, this);
    },
    onRemove: function (map) {
        L.DomUtil.remove(this._div);
        map.off("zoomend viewreset", this._update, this);
    },
    _update: function () {
        var pos = this._map.latLngToLayerPoint(this._latlng);
        L.DomUtil.setPosition(this._div, pos);
    }
});

L.customLayer = function (latlng, options) {
    return new L.CustomLayer(latlng, options);
};

然而，当我试图分别在同一坐标添加两个标记和两个自定义层时，第二层似乎定位错误

这些层添加了以下代码：

var customLayer1 = L.customLayer().setPosition([3.139003, 101.686852]).addTo(map);
var customLayer2 = L.customLayer().setPosition([6.121070, 100.369797]).addTo(map);

---

有什么建议吗？代码笔是。谢谢你的帮助

对于那些可能需要这条信息的人，我已经发现了问题所在。您需要通过执行以下操作将容器的位置设置为

absolute

：

onAdd: function (map) {
    this._div = document.createElement("div");
    this._div.style.padding = "8px";
    this._div.style.border = "2px solid grey";
    this._div.style.borderRadius = "2px";

    // Set "position" to "absolute" manually for "top" and "left"
    // to work. Alternatively, apply CSS styles for leaflet-layer
    // class by adding class for all the necessary styles
    // this._div.style.position = "absolute";

    // See the link below for all the styles included
    // https://github.com/Leaflet/Leaflet/blob/master/dist/leaflet.css
    L.DomUtil.addClass(this._div, "leaflet-layer");

    this.getPane().appendChild(this._div);
    this._update();
    map.on("zoomend viewreset", this._update, this);
},

有关必要的样式，请参见指向传单.css的链接：D