Question

我正在尝试使用localStorage，我正在尝试保存用户可以在地图上创建的标记。

我创建了这个函数来放置标记并删除它们：

var redmarker = L.icon({
iconUrl: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/map-marker-icon.png',

       iconSize:     [48, 48], // size of the icon
       iconAnchor:   [24, 48], // point of the icon which will correspond to marker's location
       popupAnchor:  [-2, -48] // point from which the popup should open relative to the iconAnchor
                        });

        var popup = L.popup();

        // On map click shows coordinates X, Y
        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,
                icon: redmarker


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

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

        function onPopupOpen() {
          var tempMarker = this;

          $("#marker-delete-button:visible").click(function () {
            map.removeLayer(tempMarker);
          });
        }

        map.on('click', onMapClick);

我不熟悉localStorage，这对我来说是新的。此外，我正在尝试使弹出窗口可编辑，用户输入用户名称标记。我看到了这个输入的例子：

http://tahvel.info/simpleStorage/example/

类似的东西。

我的功能的一个工作示例：http://fiddle.jshell.net/2g4h5eu5/1/

有人可以帮我保存localStorage中的标记吗？另外我的问题是我在点击后不知道渲染片上的标记是什么，所以我不知道我需要在本地存储中保存什么来检索这些标记。

Answer 1

您可以使用以下功能来管理localStorage

localStorage.setItem('favoriteflavor','vanilla');

var taste = localStorage.getItem('favoriteflavor'); // -> "vanilla"

localStorage.removeItem('favoriteflavor'); var taste = localStorage.getItem('favoriteflavor'); // -> null

检查link 你也可以使用jQuery Storage API插件来实现更多的跨浏览器

http://fiddle.jshell.net/thesane/2g4h5eu5/29/

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


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

// Delete Marker
function deleteMarker(lng, lat) {
  var markers = localStorage.getItem("markers");
  markers = JSON.parse(markers);
   for(var i=0;i<markers.length;i++){
    latlng = JSON.parse(markers[i]);

    if(latlng.lat == lat && latlng.lng == lng)
    {
        markers.splice(i,1);

    }
  }
  localStorage.setItem('markers', JSON.stringify(markers));
}

如何将标记位置保存到传单中的localStorage？

1 个答案: