本地存储中的传单标记，如何获取标记经度并从存储中排除？

Question

I created a function that on click places a marker on map, and save it to localstorage. Inside the marker popup, its displayed the marker position, and a delete button.

How I can make that delete button get actual marker position, compare to the ones stored in localstorage, and if find an equal value, delete it from local storage?

Using this:

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}

I get the what's in localstorage, I noticed that the markers are saved with a "\\", any way to improve this code?

["{\"lat\":1780,\"lng\":456}","{\"lat\":1280,\"lng\":904}","{\"lat\":1000,\"lng\":-132}","{\"lat\":216,\"lng\":300}"]

The code:

    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: false,
            icon: totem

            }).bindPopup("<span>X: " + e.latlng.lng + ", Y: " + e.latlng.lat + "</span><br><a href='#' id='marker-delete-button'>Delete marker</a>");

            marker.on("popupopen", onPopupOpen);

            marker.on("dragend", function (ev) {

                var chagedPos = ev.target.getLatLng();
                this.bindPopup(chagedPos.toString()).openPopup();

            });

          // Begin store markers in local storage
          storeMarker(e.latlng);
          // End store markers in local storage

            return marker;
        }
    }).addTo(map);
}

function onPopupOpen() {
    var tempMarker = this;

    $("#marker-delete-button:visible").click(function () {

        map.removeLayer(tempMarker);
        localStorage.removeItem("markers");
    });
}

/// Load markers
function loadMarkers(){
    var markers = localStorage.getItem("markers");
    if(!markers) return;
    markers = JSON.parse(markers);
    markers.forEach(function(entry) {
        latlng = JSON.parse(entry);
            var geojsonFeature = {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Point",
                    "coordinates": [latlng.lat, latlng.lng]
                }
            }

        var marker;

        L.geoJson(geojsonFeature, {

            pointToLayer: function(feature){

                marker = L.marker(latlng, {

                    title: "Resource Location",
                    alt: "Resource Location",
                    riseOnHover: true,
                    draggable: true,
                    icon: totem


                }).bindPopup("<span>X: " + latlng.lng + ", Y: " + latlng.lat + "</span><br><a href='#' id='marker-delete-button'>Delete marker</a>");

                marker.on("popupopen", onPopupOpen);

                return marker;
            }
        }).addTo(map);
    });
}
/// Store markers
function storeMarker(marker){

    var markers = localStorage.getItem("markers");
    if(!markers) {
        markers = new Array();
        console.log(marker);
        markers.push(JSON.stringify(marker));
    }
    else
    {
        markers = JSON.parse(markers);
        markers.push(JSON.stringify(marker));
    }
    console.log(JSON.stringify(markers));
    localStorage.setItem('markers', JSON.stringify(markers));
}


    map.on('click', onMapClick);

    loadMarkers();

Answer 1

You seem to be confused about what locaStorage is/does, it stores data as key:value pairs, so what you have there is basically a list of stuff where you have:

key: \"lat\":1780,
value: \"lng\":456

As for deleting geoJSON features, a possibility is to use is the function onEachFeature() that can bind a function to geoJSON features before they are added to the map, so perhaps you can use that to bind a delete function when the delete button of the popup is clicked but while it can remove the layer from the map, it will not wipe the data from localStorage as leaflet as no way of referencing the data there.

Another possibility is to add unique id's to your points when creating them so you can reference them more easily when you want to remove them from database.