每次我刷新本地存储中的页面项目重复项

Question

我知道我在某处找到的代码一团糟。我看到很多函数被多次调用，我不知道如何解决。我从未使用过 localStorage，但我需要这个时间。当我刷新 localStorage 中重复的页面项目时，它会使站点错误完全无法使用。如果有人知道如何优化这个，我将不胜感激。

var map,
    markersAll = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  renderMarkers();

  map.addListener('click', function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();    
    generateMarker(lat, lng);    
    //console.log(lat, lng);
  });  
}

let markers = getMarkersFromLocalStorage()
console.log(markers)
function getMarkersFromLocalStorage(){
  return localStorage.markers ? JSON.parse(localStorage.markers) : []
}

function addMarkerToLocalStorage(lat, lng) {
  markers.push({lat, lng});
  localStorage.markers = JSON.stringify(markers);
};

function removeMarkerFromLocalStorage(lat, lng) {
  let newMarkers = [];
  markers.forEach(function(marker) {
    if(marker.lat != lat && marker.lng != lng) {
      newMarkers.push({
        lat: marker.lat,
        lng: marker.lng
      });
    }
  });

  localStorage.markers = JSON.stringify(newMarkers);
};

function clearMarkers() {
  markersAll.forEach((marker) => {
    marker.setMap(null);
  });
};

function renderMarkers() {
  markers.forEach(function(marker) {
    console.log(marker.lat, marker.lng);
    generateMarker(marker.lat, marker.lng);
  });
};

var marker
var icon = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
  strokeColor: "blue",
  scale: 3
}

function generateMarker(lat, lng) {
  marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    map: map,
    icon: icon
  }); 
    marker.setMap(map);
    markersAll.push(marker);
    addMarkerToLocalStorage(lat, lng);
    // changing icon on click

  marker.addListener('rightclick', function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();
    //console.log('right click', lat, lng);
    clearMarkers();
    removeMarkerFromLocalStorage(lat, lng);
    // renderMarkers();    
  });   
  
  marker.addListener('click', changeColor);

};

function changeColor(evt) {
  this.setIcon(pinSymbol('blue'));
}

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}
// clear all markers
document.getElementById('clear-all-markers').addEventListener('click', clearAllMarkers)
function clearAllMarkers(){
  localStorage.clear()
}

Answer 1

每次您的页面运行时，它都会创建标记并将它们添加到本地存储。

function addMarkerToLocalStorage(lat, lng) {
  markers.push({lat, lng});
  localStorage.markers = JSON.stringify(markers);
};

上面的函数就是这样做的。但是这个函数没有任何检查标记是否存在的逻辑，而且在不知道用例是什么的情况下，我不确定它是什么意思。

代码有清除所有标记的功能

// clear all markers
document.getElementById('clear-all-markers').addEventListener('click', clearAllMarkers)

function clearAllMarkers(){
  localStorage.clear()
}

但这附加到上面显示的“清除所有标记”按钮。

您可以通过调用 clearAllMarkers(); 强制代码自动清除标记；在代码的最顶部运行；像这样：

var map,
    markersAll = [];
clearAllMarkers(); // this will clear local storage

另一种选择是更改 addMarkerToLocalStorage 代码，以便它检查标记是否存在，这将防止许多标记从一个位置存在 - 同样，这可能不是您想要的用例

function addMarkerToLocalStorage(lat, lng) {
  var add = true;
  // check if this marker exists!
  markers.forEach(function(marker){
    if (marker.lat===lat && marker.lng===lng) add=false;
  })
  // did we find the marker? exit
  if (add===false) return;
  markers.push({lat, lng});
  localStorage.markers = JSON.stringify(markers);
};

我想选项二可能是您所需要的，但根据您提供的信息，我不知道这段代码的用例是什么。

每次我刷新本地存储中的页面项目重复项

Everytime I refresh page items duplicates in local storage

javascript

google-maps

google-maps-markers

local-storage