Листовка - Як знайти існуючі маркери та видалити маркери?

Я почав використовувати листівку як карту з відкритим кодом, http://leaflet.cloudmade.com/

Наступний код jQuery дозволить створити маркери на карті, натиснувши на карту:

 map.on('click', onMapClick);
function onMapClick(e) {
        var marker = new L.Marker(e.latlng, {draggable:true});
        map.addLayer(marker);
        marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};

Але наразі в моєму коді немає способу видалити існуючі маркери або знайти всі створені мною маркери на карті та помістити їх у масив. Хтось може допомогти мені зрозуміти, як це зробити? Документація щодо листівки доступна тут: http://leaflet.cloudmade.com/reference.html

ви повинні поставити свій "маркер var" з функції. Потім пізніше ви можете отримати доступ до нього:

var marker;
function onMapClick(e) {
        marker = new L.Marker(e.latlng, {draggable:true});
        map.addLayer(marker);
        marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};

потім пізніше:

map.removeLayer(marker)

Але ви можете мати лише останній маркер таким чином, оскільки кожен раз маркер var стирається останнім. Отже, один із способів - створити глобальний масив маркера, і ви додасте маркер у глобальний масив.

Ви також можете натиснути маркери на масив. Дивіться приклад коду, це працює для мене:

/*create array:*/
var marker = new Array();

/*Some Coordinates (here simulating somehow json string)*/
var items = [{"lat":"51.000","lon":"13.000"},{"lat":"52.000","lon":"13.010"},{"lat":"52.000","lon":"13.020"}];

/*pushing items into array each by each and then add markers*/
function itemWrap() {
for(i=0;i<items.length;i++){
    var LamMarker = new L.marker([items[i].lat, items[i].lon]);
    marker.push(LamMarker);
    map.addLayer(marker[i]);
    }
}

/*Going through these marker-items again removing them*/
function markerDelAgain() {
for(i=0;i<marker.length;i++) {
    map.removeLayer(marker[i]);
    }  
}

Ось код і демонстрація для додавання маркера , видалення будь-якого маркера, а також отримання всіх присутніх / доданих маркерів :

Ось весь код JSFiddle . Також тут демонструється повна демонстраційна сторінка .

Додавання маркера:

// Script for adding marker on map click
map.on('click', onMapClick);

function onMapClick(e) {

    var geojsonFeature = {

        "type": "Feature",
        "properties": {},
        "geometry": {
                "type": "Point",
                "coordinates": [e.latlng.lat, e.latlng.lng]
        }
    }

    var marker;

    L.geoJson(geojsonFeature, {

        pointToLayer: function(feature, latlng){

            marker = L.marker(e.latlng, {

                title: "Resource Location",
                alt: "Resource Location",
                riseOnHover: true,
                draggable: true,

            }).bindPopup("<input type='button' value='Delete this marker' class='marker-delete-button'/>");

            marker.on("popupopen", onPopupOpen);

            return marker;
        }
    }).addTo(map);
}

Видалення маркера:

// Function to handle delete as well as other events on marker popup open

function onPopupOpen() {

    var tempMarker = this;

    // To remove marker on click of delete button in the popup of marker
    $(".marker-delete-button:visible").click(function () {
        map.removeLayer(tempMarker);
    });
}

Отримання всіх маркерів на карті:

// getting all the markers at once
function getAllMarkers() {

    var allMarkersObjArray = []; // for marker objects
    var allMarkersGeoJsonArray = []; // for readable geoJson markers

    $.each(map._layers, function (ml) {

        if (map._layers[ml].feature) {

            allMarkersObjArray.push(this)
            allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()))
        }
    })

    console.log(allMarkersObjArray);
}

// any html element such as button, div to call the function()
$(".get-markers").on("click", getAllMarkers);

Ось jsFiddle, що дозволяє створювати маркери за допомогою вашого onMapClickметоду, а потім видаляти їх, натиснувши посилання.

Процес схожий на невизначений - додайте кожен новий маркер до markersмасиву, щоб ви могли отримати доступ до певного маркера, коли ви хочете пізніше взаємодіяти з ним.

(1) додати групу шарів і масив для утримання шарів і посилання на шари як глобальні змінні:

var search_group = новий L.LayerGroup (); var clickArr = новий масив ();

(2) додати карту

(3) Додати груповий шар на карту

map.addLayer (search_group);

(4) функція додавання до карти зі спливаючим вікном, що містить посилання, яке при натисканні матиме можливість вилучити. Це посилання матиме, як його ідентичне значення, довге значення точки. Потім цей ідентифікатор буде порівнюватись з натисканням одного із створених маркерів і його потрібно видалити.

 map.on('click', function(e) {
        var clickPositionMarker = L.marker([e.latlng.lat,e.latlng.lng],{icon: idMarker});
        clickArr.push(clickPositionMarker);
        mapLat = e.latlng.lat;
        mapLon = e.latlng.lng;
        clickPositionMarker.addTo(search_group).bindPopup("<a name='removeClickM' id="+e.latlng.lat+"_"+e.latlng.lng+">Remove Me</a>")
                .openPopup();   

                /*   clickPositionMarker.on('click', function(e) {
                  markerDelAgain(); 
                }); */


});

(5) Функція видалення порівняйте маркер довга з ідентифікатором, знятим у видаленні:

$(document).on("click","a[name='removeClickM']", function (e) {

      // Stop form from submitting normally
    e.preventDefault();

    for(i=0;i<clickArr.length;i++) {

    if(search_group.hasLayer(clickArr[i]))
    {
        if(clickArr[i]._latlng.lat+"_"+clickArr[i]._latlng.lng==$(this).attr('id'))
            {
                hideLayer(search_group,clickArr[i]);
                clickArr.splice(clickArr.indexOf(clickArr[i]), 1);
            }

    }

    }  

Коли ви зберігаєте шанобливість до маркера у функції додавання, маркер може видалити його самостійно. Немає потреби в масивах.

function addPump(){
   var pump = L.marker(cords,{icon: truckPump}).addTo(map).bindPopup($('<a href="#" class="speciallink">Remove ME</a>').click(function() {
            map.removeLayer(pump);
          })[0]);
        }

Ви layerGroupще пробували ?

Документи тут https://leafletjs.com/reference-1.2.0.html#layergroup

Просто створіть шар, додайте весь маркер до цього шару, тоді ви зможете легко знайти та знищити маркер.

var markers = L.layerGroup()
const marker = L.marker([], {})
markers.addLayer(marker)

У моєму випадку я маю різні групи шарів, щоб користувачі могли показувати / приховувати кластери подібних маркерів типу. Але в будь-якому випадку ви видаляєте окремий маркер, перебираючи його по групах шарів, щоб знайти та видалити його. Під час циклу шукайте маркер із спеціальним атрибутом, у моєму випадку - "ключем", який додається, коли маркер доданий до групи шарів. Додайте "ключ" так само, як додати атрибут заголовка. Пізніше цей варіант отримує варіант шару. Коли ви знайдете цю відповідність, ви .removeLayer () і вона позбудеться саме цього маркера. Сподіваюся, що це допоможе вам!

eventsLayerGroup.addLayer(L.marker([tag.latitude, tag.longitude],{title:tag.title, layer:tag.layer, timestamp:tag.timestamp, key:tag.key, bounceOnAdd: true, icon: L.AwesomeMarkers.icon({icon: 'vignette', markerColor: 'blue', prefix: '', iconColor: 'white'}) }).bindPopup(customPopup(tag),customOptions).on('click', markerClick)); 

function removeMarker(id){
    var layerGroupsArray = [eventsLayerGroup,landmarksLayerGroup,travelerLayerGroup,marketplaceLayerGroup,myLayerGroup];
    $.each(layerGroupsArray, function (key, value) {
        value.eachLayer(function (layer) {
            if(typeof value !== "undefined"){
                if (layer.options.layer){
                    console.log(layer.options.key);
                    console.log(id);
                    if (id === layer.options.key){
                        value.removeLayer(layer);
                    }
                }
            }
        });
    });
}

Можливо, я запізнився для цього, але все-таки я створив один відкритий проект чаклунства, щоб зробити те саме разом з якоюсь іншою справою

https://github.com/ikishanoza/ionic-leaflet

будь ласка, замовіть і зробіть зірку, якщо вам подобається :)