动态添加和删除标记

Question

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

$("#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);
});

在添加标记和字段以保持每个标记的经度和纬度值方面效果很好。但是，使用以下代码删除标记将删除最后一个标记，并引发错误并锁定所有标记：

$("#remove-marker").click(function () {
    if (markers.length !== 0){
        markers[markers.length-1].remove();
        markers.splice(0,1);
    }
});

这是错误：

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

我已经阅读了以下链接：

MapBox clear all current markers

mapboxgl.Marker how to remove

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

Answer 1

看来问题可能是由于您可能试图索引到一个空数组而引起的。我建议将counter的值记录到控制台，以确保它是您期望的值。同样，使用markers[markers.length-1].remove()将从markers数组中删除last标记对象，但是使用markers.splice(0,1)则从markers数组中删除first元素。相反，使用markers.splice(-1,1)应该从数组中删除最后一个marker。

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