Leaflet - 如何查找现有标记并删除标记？

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

但是目前我(在我的代码中)没有办法删除现有标记,或者找到我在地图上创建的所有标记并将它们放入数组中.任何人都可以帮我理解如何做到这一点？单张文档可在此处获取:http://leaflet.cloudmade.com/reference.html

Answer 1

你必须将你的"var marker"放在功能之外.然后您可以访问它:

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标记都会被最新标记删除.因此,一种方法是创建一个全局标记数组,并在全局数组中添加标记.

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

Answer 4

这是一个jsFiddle,它允许您使用您的onMapClick方法创建标记,然后通过单击链接删除它们.

该过程类似于undefined's - 将每个新标记添加到markers数组中,以便您以后想要与其进行交互时可以访问特定标记.

Answer 5

(1)添加图层组和数组以保存图层并引用图层作为全局变量:

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

(2)添加地图

(3)将组图层添加到地图中

map.addLayer(search_group);

(4)添加到地图功能,带有一个包含链接的弹出窗口,点击后会有一个删除选项.这个链接将作为其ID的长点.然后将此ID与您单击某个已创建标记并要删除它时进行比较.

 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)remove函数,将标记lat long与remove中触发的id进行比较:

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

    }

    }