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 code 。这里还有full page demo。

添加标记：

// 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）删除函数，将标记lat lat与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);
            }

    }

    }

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 方法应用于图层组您需要在函数外部定义标记变量才能删除它

var marker;
function newMarker() {
 markerLayer = L.layerGroup();
 marker = new L.marker( [12, 13],
 {icon:greenMarker, clickable:true}).bindPopup("Hello Marker").addTo(markerLayer); 

markerLayer.removeLayer(marker);
};

Answer 9

就我而言，我有各种图层组，以便用户可以显示/隐藏类似标记的聚类。但是，在任何情况下，您都可以通过循环图层组来删除单个标记，以查找并删除它。在循环时，搜索带有自定义属性的标记，在我的情况下是“键”，在标记添加到图层组时添加。像添加title属性一样添加'key'。后来这是一个图层选项。当你找到匹配时，你.removeLayer（）并删除那个特定的标记。希望能帮到你！

lconvert compiled.qm -o source.ts

Answer 10

我要删除标记的操作是创建一个允许我这样做的按钮

希望我可以帮助某人：）

//Button who active deleteBool
const button = document.getElementById('btn')

//Boolean who let me delete marker
let deleteBool = false

//Button function to enable boolean
button.addEventListener('click',()=>{
  deleteBool = true
})

// Function to delete marker 
const deleteMarker = (e) => {
    if (deleteBool) {
        e.target.removeFrom(map)
        deleteBooly = false
    }
}

//Initiate map
var map = L.map('map').setView([51.505, -0.09], 13);

//Create one marker
let marker = L.marker([51.5, -0.09]).addTo(map)
//Add Marker Function
marker.on('click', deleteMarker)

body {
  display: flex;
  flex-direction: column;
}

#map{
  width: 500px;
  height: 500px;
  margin: auto;
}

#btn{
  width: 50px;
  height: 50px;
  margin: 2em auto; 
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <title>MovieCenter</title>
</head>

<body>
    <div id="map"></div>
    <button id="btn">Click me!</button>
    <script script="script" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="script.js"></script>
</body>

</html>

Answer 11

如果您使用的是 L.Routing.control，则包括将标记保存在数组中的答案将不起作用。他们没有为我工作。我发现 L.Routing.control 会自动添加标记，删除它们是通过删除 L.Routing.control 来完成的：

this.map.removeControl(this.routingControl)

路线被移除，所有航点/标记，除了第一个，当我控制台.记录图层时，带有航点的图层仍然存在，我知道为什么。

这个解决方案终于对我有用了：

this.map.eachLayer((layer: any) => {
  if (layer.options.waypoints && layer.options.waypoints.length) {
    this.map.removeLayer(layer);
   }
});

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

11 个答案:

添加标记：

删除标记：

获取地图中的所有标记：