Broşür - Mevcut işaretçiler nasıl bulunur ve işaretçiler nasıl silinir?

Broşürü açık kaynak haritası olarak kullanmaya başladım, http://leaflet.cloudmade.com/

Aşağıdaki jQuery kodu, harita tıklamasında harita üzerinde işaretlerin oluşturulmasını sağlayacaktır:

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

Ancak şu anda (kodumda) mevcut işaretçileri silmemin veya bir harita üzerinde oluşturduğum tüm işaretçileri bulup onları bir diziye koymamın bir yolu yok. Biri bunu nasıl yapacağımı anlamama yardım edebilir mi? Broşür belgeleri burada mevcuttur: http://leaflet.cloudmade.com/reference.html

"var işaretleyicinizi" işlevden çıkarmanız gerekir. Daha sonra ona erişebilirsiniz:

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

daha sonra :

map.removeLayer(marker)

Ancak bu şekilde yalnızca en son işaretçiye sahip olabilirsiniz, çünkü her seferinde var işaretçisi en yeniye göre silinir. Öyleyse gitmenin bir yolu, global bir işaretçi dizisi oluşturmaktır ve işaretçinizi global diziye eklersiniz.

İşaretçileri bir diziye de itebilirsiniz. Kod örneğine bakın, bu benim için çalışıyor:

/*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]);
    }  
}

İşte için kod ve demo işaretleyici ekleme , işaretleyici herhangi silme ve ayrıca tüm mevcut eklendi / işaretçileri alma :

İşte JSFiddle kodunun tamamı . Ayrıca tam sayfa demosu burada .

İşaretçiyi eklemek:

// 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);
}

İşaretleyiciyi Silme:

// 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);
    });
}

Haritadaki tüm işaretçileri almak:

// 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);

Yönteminizi kullanarak işaretçiler oluşturmanıza onMapClickve ardından bir bağlantıya tıklayarak bunları silmenize olanak tanıyan bir jsFiddle .

İşlem, tanımsızlara benzer - her yeni işaretleyiciyi bir markersdiziye ekleyin, böylece daha sonra onunla etkileşimde bulunmak istediğinizde belirli bir işaretçiye erişebilirsiniz.

(1) katmanları tutmak ve katmanlara genel değişkenler olarak başvurmak için katman grubu ve dizi ekleyin:

var search_group = new L.LayerGroup (); var clickArr = new Array ();

(2) harita ekle

(3) Haritaya grup katmanı ekleyin

map.addLayer (search_group);

(4) tıklandığında bir kaldırma seçeneğine sahip olacak bir bağlantı içeren bir açılır pencereye sahip haritaya ekle işlevi. Bu bağlantının kimliği, noktanın enlem uzunluğuna sahip olacaktır. Bu kimlik, daha sonra, oluşturduğunuz işaretçilerden birine tıkladığınızda ve onu silmek istediğinizde karşılaştırılacaktır.

 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) Kaldırma fonksiyonu, enlem boylam işaretini kaldırmada ateşlenen id ile karşılaştırın:

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

    }

    }  

Ekleme işlevinde işaretleyiciye olan saygıyı kaydettiğinizde, işaretçi kendini kaldırabilir. Dizilere gerek yok.

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]);
        }

layerGroupHenüz denedin mi?

Buradaki dokümanlar https://leafletjs.com/reference-1.2.0.html#layergroup

Sadece bir katman oluşturun, tüm işaretçileri bu katmana ekleyin, ardından işaretleyiciyi kolayca bulabilir ve yok edebilirsiniz.

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

Belki bunun için çok geç kaldım ama yine de aynı şeyi başka bir şeyle birlikte yapmak için bir açık sorma projesi yarattım

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

lütfen kontrol edin ve isterseniz yıldız yapın :)

Benim durumumda, kullanıcıların benzer tür işaretçilerinin kümelerini gösterebilmesi / gizleyebilmesi için çeşitli katman gruplarına sahibim. Ancak, her durumda, onu bulmak ve silmek için katman gruplarınız üzerinden döngü yaparak tek bir işaretleyiciyi silersiniz. Döngü sırasında, özel bir özniteliğe sahip bir işaretçi arayın, benim durumumda, işaretleyici katman grubuna eklendiğinde eklenen bir 'anahtar'. Tıpkı bir başlık özelliği eklediğiniz gibi 'anahtarınızı' ekleyin. Daha sonra buna bir katman seçeneği verilir. Bu eşleşmeyi bulduğunuzda, siz .removeLayer () ve o belirli işaretleyiciden kurtulur. Umarım bu sana yardımcı olur!

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);
                    }
                }
            }
        });
    });
}