jQuery Leaflet - 如何查找现有标记，并删除标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9912145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet - How to find existing markers, and delete markers?
提问by jay
I have started using leaflet as an open source map, http://leaflet.cloudmade.com/
我已经开始使用传单作为开源地图，http://leaflet.cloudmade.com/
The following jQuery code will enable the creation of markers on the map on map click:
以下 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();
};
But there is currently no way for me (in my code) to delete existing markers, or find all the markers i've created on a map and put them into an array. Can anyone help me understand how to do this? Leaflet documentation is available here : http://leaflet.cloudmade.com/reference.html
但是目前我（在我的代码中）无法删除现有标记，或者找到我在地图上创建的所有标记并将它们放入数组中。谁能帮我理解如何做到这一点？传单文档可在此处获得：http: //leaflet.cloudmade.com/reference.html
回答by Laurent Debricon
you have to put your "var marker" out of the function. Then later you can access it :
你必须把你的“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();
};
then later :
然后：
map.removeLayer(marker)
But you can only have the latest marker that way, because each time, the var marker is erased by the latest. So one way to go is to create a global array of marker, and you add your marker in the global array.
但是您只能以这种方式拥有最新的标记，因为每次，var 标记都会被最新的标记擦除。因此，一种方法是创建一个全局标记数组，然后将标记添加到全局数组中。
回答by undefined
You can also push markers into an array. See code example, this works for me:
您还可以将标记推入数组。请参阅代码示例，这对我有用：
/*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]);
}
}
回答by Kedar.Aitawdekar
Here is the code and demo for Adding the marker, deleting any of the markerand also getting all the present/added markers:
这是添加标记、删除任何标记以及获取所有存在/添加的标记的代码和演示：
Here is the entire JSFiddle code . Also here is the full page demo.
这是整个JSFiddle 代码。另外这里是整页演示。
Adding the marker :
添加标记：
// 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);
}
Deleting the Marker :
删除标记：
// 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 in the map :
获取地图中的所有标记：
// 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);
回答by Brett DeWoody
Here's a jsFiddlethat lets you to create markers using your onMapClickmethod, then delete them by clicking a link.
这是一个jsFiddle，可让您使用您的onMapClick方法创建标记，然后通过单击链接删除它们。
The process is similar to undefined's - add each new marker to a markersarray so you can access a specific marker when you want to interact with it later.
该过程类似于 undefined 的 - 将每个新标记添加到markers数组中，以便您可以在以后想要与其交互时访问特定标记。
回答by droid-zilla
(1) add layer group and array to hold layers and reference to layers as global variables:
(1) 添加图层组和数组来保存图层和引用图层作为全局变量：
var search_group = new L.LayerGroup(); var clickArr = new Array();
var search_group = new L.LayerGroup(); var clickArr = new Array();
(2) add map
(2) 添加地图
(3) Add group layer to map
(3) 添加组图层到地图
map.addLayer(search_group);
map.addLayer(search_group);
(4) the add to map function, with a popup that contains a link, which when clicked will have a remove option. This link will have, as its id the lat long of the point. This id will then be compared to when you click on one of your created markers and you want to delete it.
(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) The remove function, compare the marker lat long to the id fired in the remove:
（5）remove函数，比较marker 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);
}
}
}
回答by F6F
When you save the reverence to the marker in the adding function the marker can remove it self. No need for arrays.
当您在添加功能中将崇敬保存到标记时，标记可以自行删除。不需要数组。
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]);
}
回答by Son Tr.
Have you tried layerGroupyet?
你试过layerGroup了吗？
Docs here https://leafletjs.com/reference-1.2.0.html#layergroup
文档在这里https://leafletjs.com/reference-1.2.0.html#layergroup
Just create a layer, add all marker to this layer, then you can find and destroy marker easily.
只需创建一个图层，将所有标记添加到该图层，然后您就可以轻松找到并销毁标记。
var markers = L.layerGroup()
const marker = L.marker([], {})
markers.addLayer(marker)
回答by Kishan Oza
May be I am too late for this but still I have created one open sorce project to do the same along with some other thing
可能我为时已晚，但我仍然创建了一个开源项目来做同样的事情以及其他一些事情
https://github.com/ikishanoza/ionic-leaflet
https://github.com/ikishanoza/ionic-leaflet
please checkout and do star if you like :)
如果您愿意，请结帐并加星：)
回答by Ronnie Royston
In my case, I have various layer groups so that users can show/hide clusters of like type markers. But, in any case you delete an individual marker by looping over your layer groups to find and delete it. While looping, search for a marker with a custom attribute, in my case a 'key', added when the marker was added to the layer group. Add your 'key' just like adding a title attribute. Later this is gotten an a layer option. When you find that match, you .removeLayer() and it gets rid of that particular marker. Hope that helps you out!
就我而言，我有各种图层组，以便用户可以显示/隐藏类似类型标记的集群。但是，在任何情况下，您都可以通过遍历图层组来查找和删除单个标记来删除它。循环时，搜索具有自定义属性的标记，在我的例子中是“键”，在标记添加到图层组时添加。添加您的“密钥”就像添加标题属性一样。后来这得到了一个图层选项。当您找到该匹配项时，您可以使用 .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);
}
}
}
});
});
}
