Notice - Comment trouver des marqueurs existants, et de supprimer des marqueurs?

Question

J'ai commencé à utiliser dépliant comme un open-source de la carte, http://leaflet.cloudmade.com/

La suite de jQuery code va permettre la création de marqueurs sur la carte sur la carte, cliquez sur:

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

Mais il n'y a actuellement aucun moyen pour moi (dans mon code) de supprimer les marqueurs, ou de trouver tous les repères que j'ai créé sur une carte et de les mettre dans un tableau. Quelqu'un peut-il m'aider à comprendre comment faire cela? Feuillet de documentation est disponible ici : http://leaflet.cloudmade.com/reference.html

Answer 1

vous devez mettre votre "var marqueur" de la fonction. Puis plus tard, vous pouvez accéder :

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

puis, plus tard :

map.removeLayer(marker)

Mais vous ne pouvez avoir le dernier marqueur de cette façon, parce qu'à chaque fois, le var marqueur est effacée par la dernière. Donc, une façon est de créer un réseau mondial de marqueur, et vous ajoutez votre marqueur dans le tableau global.

Answer 2

Vous pouvez aussi appuyer sur des marqueurs dans un tableau. Voir exemple de code, cela fonctionne pour moi:

/*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

Voici le code et de démonstration pour l'Ajout du marqueur, la suppression des marqueurs et aussi obtenir tous les présents/ajouté des marqueurs :

Voici l'intégralité de JSFiddle code . Aussi, voici l' intégrale de la page de démonstration.

L'ajout du marqueur :

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

---

La suppression du Marqueur :

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

---

L'obtention de toutes les marqueurs de la carte :

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

Answer 4

Voici un jsFiddle qui vous permet de créer des marqueurs à l'aide de votre onMapClick méthode, puis de les supprimer en cliquant sur un lien.

Le processus est similaire à indéfini - ajouter chaque nouveau marqueur à un markers tableau afin que vous pouvez accéder à un marqueur spécifique lorsque vous souhaitez interagir avec elle plus tard.

Answer 5

(1) ajouter une couche de groupe et de tableau pour stocker les couches de référence et à des couches comme des variables globales:

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

(2) ajouter la carte

(3) Ajout d'un groupe de couches de carte

carte.addLayer(search_group);

(4) l'ajouter à la carte de fonction, avec une fenêtre qui contient un lien qui lorsqu'il est cliqué aura une option supprimer. Ce lien devra, comme l'id de la latitude et de la longitude du point. Cet identifiant est ensuite comparé à lorsque vous cliquez sur un de vos marqueurs créés et que vous souhaitez supprimer.

 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) La fonction de suppression, de comparer le marqueur de la latitude et de la longitude et la carte d'identité tiré de la supprimer:

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

    }

    }