Маркер не удаляется: листовка

Question

Я работаю с листовкой api. Где я добавил пользовательский элемент управления для маркера.

И у меня есть кнопка, которая имеет тенденцию удалять все маркеры.

проблема

Из-за переноса я должен удалить все маркеры, но функция не работает.... Браузер не выдает никаких ошибок консоли, поэтому я нахожусь в неведении, не полностью понял структуру API.

скрипт

            var markers = new L.FeatureGroup();
            map.on('click', function markerPlace(e) {
                //L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
            marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
                markers.addLayer(marker);
                map.off('click', markerPlace);
            });
        }).addTo(map);

    //onClick this button we have to remove all marker
    <button id="removeMarker">Remove Markers</button>      
    $('#removeMarker').click(function (e) {map.removeLayer(markers) });

Если у кого-то есть идеи по этому поводу, пожалуйста, помогите или любые ссылки будут оценены. Спасибо за ваше время

Answer 1

Когда вы правильно идентифицируете свой код, вы можете легко обнаружить первую ошибку:

var markers = new L.FeatureGroup();

map.on('click', function markerPlace(e) {
    //L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
    marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
    markers.addLayer(marker);
    map.off('click', markerPlace);
});

}).addTo(map); // <- What is this doing here

Это должно дать вам большую жирную ошибку консоли. Я предполагаю, что это принадлежит вашему L.FeatureGroup как это:

var markers = new L.FeatureGroup().addTo(map); <- Moved to here

map.on('click', function markerPlace(e) {
    //L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
    marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
    markers.addLayer(marker);
    map.off('click', markerPlace);
});

Итак, вы хотите, чтобы маркер был добавлен в L.FeatureGroup называется markers тогда зачем добавлять их на карту?

marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);

Это должно быть изменено на:

marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(markers);

Итак, вкратце: в событии щелчка на карте вы пытаетесь удалить слой объектов маркеров, который не был добавлен должным образом, и вы добавили маркеры на карту, а не в группу объектов.

PS: Вы хотите удалить маркеры, но на самом деле вы пытаетесь удалить всю группу объектов. Если вы хотите оставить группу объектов на месте и удалить только маркеры, вы также можете использовать clearLayers метод L.FeatureGroup:

markers.clearLayers();