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

Question

我正在尝试将我在传单中单击时创建的标记保存在本地存储中，然后使用按钮将其删除。问题是我不知道如何一次只删除一个标记并将它们从主图层中删除而不影响其他标记。

我想为每个创建的标记添加一个唯一的 ID（这就是 "Marker #" 的原因），然后在删除时查看当前标记的 ID 或位置（经纬度）是否与本地存储中存储的相匹配，然后将其从本地存储中删除，并从主层中删除。

谁能帮我解决这个问题？这让我很头疼！

我正在使用此功能将它们添加到地图和本地存储中：

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

你可以看到它在这里工作：

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

Answer 1

一种方法是在单击标记时遍历 localStorage 中保存的坐标数组，并将它们与单击标记的坐标进行比较。一旦它们相同，从 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);
  });
}

这里是 plunker：http://plnkr.co/edit/1xVZjKC1184dfuOlGqVX?p=preview

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

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

javascript

markers

local-storage

leaflet