简体   繁体   English

如何从传单的本地存储和图层组中删除特定项目?

[英]How to remove specific item from local Storage and layergroup on leaflet?

I am trying to save on localstorage the markers that I create on click in leaflet and delete them using a button. 我试图将在单击传单中创建的标记保存在localstorage上,然后使用按钮将其删除。 The problem is that I don't know how to delete just one marker at time and remove them from the main layer without affecting the others. 问题是我不知道如何一次只删除一个标记并将其从主层删除而又不影响其他标记。

I want to add a unique id to each marker created (that's why the "Marker #") and later on delete see if the current marker's id or location (lat,lng) match the one stored on localstorage, then delete it from the localstorage and remove it from the main layer. 我想为创建的每个标记添加一个唯一的ID(这就是“标记#”的原因),然后在删除时查看当前标记的ID或位置(纬度,经度)是否与存储在本地存储中的ID或位置匹配,然后从本地存储中删除它并将其从主层中删除。

Anyone could help me solve this? 有人可以帮我解决这个问题吗? This is giving me headaches! 这让我头疼!

I am using this function to add them on the map and in localstorage: 我正在使用此功能将其添加到地图和本地存储中:

initUserLayerGroup();

map.on('click', onMapClick);

var groupUser;

function initUserLayerGroup() {
    if (localStorage.userMarkers !== undefined) {
        var storageMarkers = [];
        var markersUser = [];

        storageMarkers = JSON.parse(localStorage.userMarkers);

        for (var i = 0; i < storageMarkers.length; i++) {
            var x = storageMarkers[i].coords.x;
            var y = storageMarkers[i].coords.y;
            var name = storageMarkers[i].name;

            var marker = L.marker([y, x]).bindPopup(name + "<br><a href='#' class='delete'>Delete</a>");

            marker.on("popupopen", onPopupOpen);

            markersUser.push(marker);
        }

        groupUser = L.layerGroup(markersUser);

        map.addLayer(groupUser);
    }
}

function onMapClick(e) {
    var storageMarkers = [];
    var markersUser = [];

    if (localStorage.userMarkers !== undefined) {
        storageMarkers = JSON.parse(localStorage.userMarkers);
    }

    storageMarkers.push({
        "coords": {
            "x": e.latlng.lng,
            "y": e.latlng.lat
        },
        "name": "Marker #"
    });

    var x = storageMarkers[storageMarkers.length -1].coords.x;
    var y = storageMarkers[storageMarkers.length -1].coords.y;
    var name = storageMarkers[storageMarkers.length -1].name;

    var marker = L.marker([y, x]).bindPopup(name + "<br>X: "+ x +", Y: "+ y +"<br><a href='#' class='delete'>Delete</a>");

    marker.on("popupopen", onPopupOpen);

    markersUser.push(marker);

    groupUser = L.layerGroup(markersUser);

    map.addLayer(groupUser);

    localStorage.userMarkers = JSON.stringify(storageMarkers);
}

function onPopupOpen() {
    var tempMarker = this.getLatLng();

    $('.delete').click(function() {
        localStorage.removeItem('userMarkers');
        map.removeLayer(groupUser);
    });
}

You can see it working here: 您可以在这里看到它的工作方式:

http://plnkr.co/edit/vYDExBBqy9zCGBRZJ944?p=preview http://plnkr.co/edit/vYDExBBqy9zCGBRZJ944?p=preview

One way is to iterate over the saved array of coordinates in localStorage when the marker is clicked and compare them with the coordinates of the clicked marker. 一种方法是在单击标记时遍历localStorage保存的坐标数组,并将它们与单击的标记的坐标进行比较。 Once they are the same, delete this item from localSotrage and update it. 一旦它们相同,则从localSotrage删除此项目并进行更新。

function onPopupOpen() {
  var _this = this;
  var clickedMarkerCoords = this.getLatLng();

  $('.delete').click(function() {
    storageMarkers = JSON.parse(localStorage.userMarkers);
    for(i = storageMarkers.length; i > 0; i--) {
      if (typeof storageMarkers[i] != 'undefined' && 
        (clickedMarkerCoords.lat == storageMarkers[i].coords.y &&
        clickedMarkerCoords.lng == storageMarkers[i].coords.x)
      ) {
        storageMarkers.splice(i, 1);
        localStorage.userMarkers = JSON.stringify(storageMarkers);
      }
    }   
    map.removeLayer(_this);
  });
}

Here is the plunker: http://plnkr.co/edit/1xVZjKC1184dfuOlGqVX?p=preview 这是the人: http ://plnkr.co/edit/1xVZjKC1184dfuOlGqVX?p=preview

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM