Javascript 使用谷歌地图API从本地存储将坐标加载到谷歌地图

当用户单击一个按钮时，它将不断刷新其位置并将其按入数组，最后当用户单击另一个按钮时，它将显示从单击开始按钮开始的路径：

    var refreshIntervalId = setInterval(recordtrip, 5000);

function recordtrip(){
if (navigator.geolocation) {        
    navigator.geolocation.getCurrentPosition(function(position){
    x = position;

    triplog.push(new google.maps.LatLng(x.coords.latitude,x.coords.longitude));

$('#stoptrip').click(function(){
clearInterval(refreshIntervalId);

});
});
$('#showtrip').click(function(){
var lenoftrip = triplog.length - 1 ;

var mapProp = {
  center:triplog[lenoftrip],
  zoom:20,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:triplog[lenoftrip],
  });

marker.setMap(map);
var flightPath=new google.maps.Polyline({
  path:triplog,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
  });

flightPath.setMap(map);

});

它在保存到localstorage之前运行良好，但在保存并加载之后，就不再工作了。 我意识到，当我从localstorage调用该数组时，它会删除新的google.maps.LatLng。 这是保存功能：

$('#savetrip').click(function(){
localStorage.setItem(titleoftrip,JSON.stringify(triplog));
alert("Saved!");
triplog = [];
}

---

如何解决此问题？

如果答案有点混乱，很抱歉，但我解决了我遇到的问题： 我意识到问题在于它在解析数据时出错。我认为这是因为我保存了数组

triplog

，其中存储的每个数据都是

新的google.maps.LatLng（x.coords.latitude，x.coords.longitude）

。 因此，我创建了一个新数组

triplogsave

，它只存储

x.coords.latitude，x.coords.longitude

，并将其保存到localStorage，当我调用并解析它时，它运行正常，没有任何错误。 编辑的代码为：

var triplog =[];
var triplogsave = [];
var refreshIntervalId = setInterval(recordtrip, 5000);

function recordtrip(){
if (navigator.geolocation) {        
    navigator.geolocation.getCurrentPosition(function(position){
    x = position;

    triplog.push(new google.maps.LatLng(x.coords.latitude,x.coords.longitude));
triplogsave.push(x.coords.latitude,x.coords.longitude);

$('#stoptrip').click(function(){
clearInterval(refreshIntervalId);

});
});
$('#showtrip').click(function(){
var lenoftrip = triplog.length - 1 ;

var mapProp = {
  center:triplog[lenoftrip],
  zoom:20,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:triplog[lenoftrip],
  });

marker.setMap(map);
var flightPath=new google.maps.Polyline({
  path:triplog,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
  });

flightPath.setMap(map);

});

$('#savetrip').click(function(){
localStorage.setItem(titleoftrip,JSON.stringify(triplog));
alert("Saved!");
triplog = [];
}

---

因此，在保存和加载之后，它将加载triologsave而不是Trilog，解析它并将该数组加载到google地图中。

您将数据存储在本地存储器的何处？我相信，当您将内容存储到localstorage中时，值会转换为字符串，即使true/false也会变成“true”/“false”。如果是这样，那么您应该使用

JSON.parse（）

方法将对象从字符串解析回对象。@kaho抱歉！我把它添加到问题中，我正在解析它。