добавление и удаление маркеров динамически - PullRequest
Новая
       5

добавление и удаление маркеров динамически

0 голосов
/ 16 марта 2020

Я пытаюсь динамически добавлять и удалять маркеры (нажав на кнопку) с помощью следующего кода: 

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

Работает нормально при добавлении маркеров и полей, чтобы сохранить значения lat и long для каждый маркер. Однако удаление маркеров с помощью следующего кода приведет к удалению последнего маркера, появлению ошибки и блокированию всех маркеров: 

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

, и вот ошибка: 

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

У меня есть уже прочитайте следующие ссылки:

MapBox очистить все текущие маркеры

mapboxgl. Маркер, как удалить

но цель здесь нужно удалить несколько маркеров по одному и обновить массив маркеров по клику.

1 Ответ

0 голосов
/ 25 марта 2020

Похоже, что проблема, вероятно, связана с тем, что вы можете пытаться индексировать в пустой массив. Я бы порекомендовал записать значения counter на консоль, чтобы убедиться, что это именно то, что вы ожидаете. Кроме того, при markers[markers.length-1].remove() вы удаляете маркерный объект last из массива markers, но при markers.splice(0,1) вы удаляете элемент first из markers массив. Использование markers.splice(-1,1) вместо этого должно удалить последний marker из массива.

Я бы также рекомендовал рассмотреть возможность хранения информации о вашем маркере в объекте Geo JSON, а не в самом дереве DOM. Здесь является одним из многих примеров Mapbox GL JS, в котором для справки используется Geo JSON.

...