पत्रक - मौजूदा मार्करों को कैसे खोजें, और मार्करों को हटाएं?

Question

मैंने एक ओपन सोर्स मैप के रूप में लीफलेट का उपयोग करना शुरू कर दिया है, 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();
};

लेकिन मौजूदा मार्करों को हटाने, या मेरे द्वारा बनाए गए सभी मार्करों को खोजने और उन्हें एक सरणी में रखने के लिए मेरे (मेरे कोड में) कोई रास्ता नहीं है। क्या कोई मुझे यह समझने में मदद कर सकता है कि यह कैसे करना है? CAT प्रलेखन यहाँ उपलब्ध है: http://leaflet.cloudmade.com/reference.html

Comments

सबसे अच्छा तरीका एक लेयरग्रुप बनाना है। फिर हम मार्करों को लेयरग्रुप में जोड़ सकते हैं। लेयरग्रुप एक ही बार में सभी मार्करों को नियंत्रित करने की अनुमति देता है।

— neogeomat

इसे संभालने के लिए परत समूह निश्चित रूप से सबसे साफ तरीका है। डॉक्स यहां: लीफलेटज्स

— ज़ार शारदान

Answer 1

आपको अपने "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 मार्कर नवीनतम द्वारा मिटा दिया जाता है। तो जाने का एक तरीका मार्कर की एक वैश्विक सरणी बनाना है, और आप अपने मार्कर को वैश्विक सरणी में जोड़ते हैं।

Comments

पत्रक द्वारा उपयोग की जाने वाली सभी परतों को इकट्ठा करने का एक तरीका होना चाहिए। : /

— कटहल

परतों को आंतरिक रूप से संग्रहीत किया जाता है map._layers।

— फ्लॉप

@ जैकलिसिन: लेयरग्रुप और फ़ीचरग्रुप को देखें

— माइकल वेल्स

Answer 2

आप मार्कर को एक सरणी में भी धकेल सकते हैं। कोड उदाहरण देखें, यह मेरे लिए काम करता है:

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

Answer 3

यहाँ मार्कर जोड़ने के लिए कोड और डेमो है , किसी भी मार्कर को हटाना और सभी वर्तमान / जोड़े गए मार्करों को प्राप्त करना :

यहाँ संपूर्ण 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);

Comments

सभी मार्कर प्राप्त करने के लिए, map._layers[ml].featureअब और काम नहीं करता है।

— सैमुअल मेन्डेज़

Answer 4

यहां एक jsFiddle है जो आपको अपनी onMapClickविधि का उपयोग करके मार्कर बनाने देता है , फिर एक लिंक पर क्लिक करके उन्हें हटा दें।

यह प्रक्रिया अपरिभाषित के समान है - प्रत्येक नए मार्कर को एक markersसरणी में जोड़ें ताकि आप एक विशिष्ट मार्कर तक पहुंच सकें जब आप बाद में इसके साथ बातचीत करना चाहते हैं।

Comments

अच्छा! केवल एक प्रश्न, मार्कर () सरणी अभी भी हटाए गए लोगों को रखता है, आप मार्कर को सरणी से भी कैसे हटाएंगे? धन्यवाद!

— मिगुएल स्टीवंस

आप deleteआइटम को निकालने के लिए उपयोग कर सकते हैं । उदाहरण के लिए delete markers[$(this).attr('id')];।

— ब्रेट डूडूडी

इस उदाहरण में टाइलों के लिए शामिल क्लाउडमैड एपीआई अब निष्क्रिय होने लगती है। यहां एक कांटा है जो बिल्कुल समान है, लेकिन क्लाउडमैड के बजाय मैपक्वेस्ट टाइल सर्वर का उपयोग करता है, इसलिए कोई एपीआई कुंजी की आवश्यकता नहीं है। jsfiddle.net/nqDKU

— FoamyGuy

Answer 5

(1) लेयर ग्रुप और एरे को लेयर और लेयर्स को ग्लोबल वेरिएबल्स के रूप में संदर्भित करने के लिए जोड़ें:

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

(२) नक्शा जोड़ना

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


});

(५) रिमूव फंक्शन, मार्कर लॉन्ग लॉन्ग की तुलना आइडल में निकाले गए आईडी से करें:

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

    }

    }  

Answer 6

जब आप श्रद्धा को जोड़ने वाले फ़ंक्शन में मार्कर को सहेजते हैं तो मार्कर इसे स्वयं हटा सकता है। सरणियों की आवश्यकता नहीं है।

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

Answer 7

क्या आपने layerGroupअभी तक कोशिश की है?

डॉक्स यहां https://leafletjs.com/reference-1.2.0.html#layergroup

बस एक परत बनाएं, इस परत में सभी मार्कर जोड़ें, फिर आप मार्कर को आसानी से ढूंढ और नष्ट कर सकते हैं।

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

Answer 8

मेरे मामले में, मेरे पास विभिन्न परत समूह हैं ताकि उपयोगकर्ता प्रकार मार्करों के समूहों को दिखा / छिपा सकें। लेकिन, किसी भी मामले में आप इसे खोजने और हटाने के लिए अपने परत समूहों पर लूप करके एक अलग मार्कर को हटाते हैं। लूपिंग करते समय, एक कस्टम विशेषता के साथ एक मार्कर की खोज करें, मेरे मामले में एक 'कुंजी' जोड़ा, जब मार्कर को परत समूह में जोड़ा गया था। एक शीर्षक विशेषता जोड़ने की तरह अपनी 'कुंजी' जोड़ें। बाद में यह एक परत विकल्प है। जब आपको वह मैच मिल जाता है, तो आप .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);
                    }
                }
            }
        });
    });
}

Answer 9

हो सकता है कि मुझे इसके लिए बहुत देर हो गई हो, लेकिन फिर भी मैंने कुछ अन्य चीजों के साथ ऐसा करने के लिए एक ओपन तलाक परियोजना बनाई है

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

कृपया जांच करें और अगर आपको पसंद है तो स्टार करें :)