Javascript 动态添加和删除标记

我尝试通过以下代码动态添加和删除标记（通过单击按钮）：

$("#add-marker").click(function () {
    var counter = document.getElementById('add-location-field').lastChild.previousSibling;
    counter = Number(counter.getAttribute("counter")) + 1;
    var latitude_name = "latitude_"+counter;
    var longitude_name = "longitude_"+counter;
    $("#add-location-field").append(
        "<input name="+latitude_name+" type=\"hidden\" counter="+counter+" id="+latitude_name+ " "+ "step=\"any\" id=\"id_latitude\"/>" +
        "<input name="+longitude_name+" type=\"hidden\" counter="+counter+" id="+longitude_name+ " " +"step=\"any\" id=\"id_longitude\"/>"
    );
    markers[counter-1] = new mapboxgl.Marker({draggable: true
        })
        .setLngLat([0, 0])
        .addTo(map);

    map.on('mousemove', function (e) {
        //TypeError: markers[(counter - 1)] is undefined
        var lng_lat = markers[counter-1].getLngLat();
        document.getElementById(longitude_name).value= lng_lat.lng;
        document.getElementById(latitude_name).value= lng_lat.lat;
    });
    markers[counter-1].on('dragend', onDragEnd);
});

下面是错误：

TypeError: markers[(counter - 1)] is undefined

我已经阅读了以下链接：

---

但这里的目的是逐个删除多个标记，并在单击时更新标记数组。

问题可能是由于您可能试图索引到空数组中。我建议将

计数器的值记录到控制台中，以确保它是您期望的值。另外，使用
markers[markers.length-1].remove（）
可以从
markers
数组中删除最后一个标记对象，但是使用
markers.splice（0,1）
可以从
markers
数组中删除第一个元素。使用
标记。拼接（-1,1）
应从阵列中删除最后一个
标记

<>我也建议您考虑将标记信息存储在对象中，而不是在DOM树本身中。是许多使用GeoJSON的Mapbox GL JS示例之一，仅供参考

TypeError: markers[(counter - 1)] is undefined