jquery - 传单 - 如何找到现有的标记，并删除标记？

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

score 167 · Accepted Answer

你必须把你的“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 标记都会被最新的擦除。因此，一种方法是创建一个全局标记数组，然后将标记添加到全局数组中。

score 58 · Accepted Answer

您还可以将标记推送到数组中。请参阅代码示例，这对我有用：

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

score 33 · Accepted Answer

这是添加标记、删除任何标记以及获取所有当前/添加的标记的代码和演示：

这是整个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);

score 16 · Accepted Answer

这是一个jsFiddle，可让您使用您的onMapClick方法创建标记，然后通过单击链接将其删除。

该过程类似于未定义的 - 将每个新标记添加到markers数组中，以便您以后想要与特定标记进行交互时可以访问它。

score 8 · Accepted Answer

(1) 添加图层组和数组来保存图层和对图层的引用作为全局变量：

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

(2) 添加地图

(3) 添加图层组到地图

map.addLayer(search_group);

(4) 添加到地图功能，带有一个包含链接的弹出窗口，单击该链接时将有一个删除选项。此链接将具有该点的 lat long 作为其 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);
            }

    }

    }

score 2 · Accepted Answer

当您在添加功能中保存对标记的崇敬时，标记可以自行删除它。不需要数组。

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

score 2 · Accepted Answer

如果将标记添加到图层组，则可以将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);
};

score 1 · Accepted Answer

你试过layerGroup了吗？

此处的文档https://leafletjs.com/reference-1.2.0.html#layergroup

只需创建一个图层，将所有标记添加到该图层，然后您就可以轻松找到和销毁标记。

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

score 0 · Accepted Answer

就我而言，我有各种图层组，以便用户可以显示/隐藏类似类型标记的集群。但是，在任何情况下，您都可以通过遍历图层组来查找和删除单个标记来删除它。循环时，搜索具有自定义属性的标记，在我的例子中是一个“键”，当标记添加到图层组时添加。添加您的“键”，就像添加标题属性一样。后来这是一个图层选项。当您找到该匹配项时，您 .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);
                    }
                }
            }
        });
    });
}

score 0 · Accepted Answer

我为删除标记所做的就是创建一个允许我这样做的按钮

希望我能帮助别人:)

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

score 0 · Accepted Answer

如果您使用的是 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);
   }
});

jquery - 传单 - 如何找到现有的标记，并删除标记？

11 回答 11

添加标记：

删除标记：

获取地图中的所有标记：

Related

Reference