Javascript 无法在Seadragon中创建多个覆盖

我正在尝试为我正在制作的海龙地图添加覆盖图，但由于某些原因，我无法确定我们的海龙忽略了我所有的覆盖图，除了第一个。非常感谢您的帮助

var viewer = null;

function init() {
    Seadragon.Config.autoHideControls = false;

    viewer = new Seadragon.Viewer("container");

    viewer.addEventListener("open", addOverlays);

    viewer.addControl(makeControl(), Seadragon.ControlAnchor.TOP_RIGHT);

    $(viewer.getNavControl()).parent().parent().css({ 'top': 10, 'right': 10 });
    viewer.openDzi("_assets/Mapdata/dzc_output.xml");

}

function makeControl() {
    var control = document.createElement("a");
    var controlText = document.createTextNode("");

    control.href = "#"; // so browser shows it as link
    control.className = "control";
    control.appendChild(controlText);

    Seadragon.Utils.addEvent(control, "click",
                    onControlClick);

    return control;
}

function onControlClick(event) {
    Seadragon.Utils.cancelEvent(event); // don't process link

    if (!viewer.isOpen()) {
        return;
    }

    // These are the coordinates of europe on this map
    var x = 0.5398693914203284;
    var y = 0.21155952391206562;
    var z = 5;

    viewer.viewport.panTo(new Seadragon.Point(x, y));
    viewer.viewport.zoomTo(z);
    viewer.viewport.ensureVisible();
}

function addOverlays(viewer) {
    drawer = viewer.drawer;
    var img = document.createElement("img");
    img.src = "_assets/Images/pushpin.png";

    $(img).addClass('pushPin');

    var overlays = [
        { elmt: img, point: new Seadragon.Point(0.51, 0.22) },
        { elmt: img, point: new Seadragon.Point(0.20, 0.13) }
    ];

    for (var i = 0; i < overlays.length; i++) {
        drawer.addOverlay(overlays[i].elmt, overlays[i].point);
    }


}

Seadragon.Utils.addEvent(window, "load", init);

---

我应该创建一个函数，返回img并在对象数组中调用它

function newpushPin() {
    var img = document.createElement("img");
    img.src = "_assets/Images/pushpin.png";
    return img
}

var overlays = [
    { elmt: newpushPin(), point: new Seadragon.Point(0.51, 0.22) },
    { elmt: newpushPin(), point: new Seadragon.Point(0.53, 0.22) },
    { elmt: newpushPin(), point: new Seadragon.Point(0.53, 0.23) },
    { elmt: newpushPin(), point: new Seadragon.Point(0.50, 0.20) }
];

---

如果长代码让人讨厌读。我所说的问题只是关于函数addOverlaysviewer.yes中的代码，因为每个覆盖都是一个具有不同id的不同html dom节点