使用Google Maps API从本地存储向Google Maps加载坐标

Question

When a user clicks a button, it will keep refreshing their location and pushing it to an array and in the end when the user clicks another button,it should show their path from the time the start button was clicked:

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

});

It works well before saving to localstorage, but after saving and loading it,it doesn't work anymore. I realized then when i call the array from localstorage,it removes the new google.maps.LatLng . This is the saving function:

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

How do you fix this?

Answer 1

Sorry if the answer is a bit confusing but I solved the problem I was having: I realised that the problem was that it was giving errors while parsing the data.I think the reason for this was that I was saving the array triplog in which each piece of data stored was new google.maps.LatLng(x.coords.latitude,x.coords.longitude) . So i created a new array triplogsave which stored only x.coords.latitude,x.coords.longitude and saved that to localStorage and when I called that and parsed it, it worked without any errors. the edited code is:

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 = [];
}

so after saving and loading,it loads triologsave instead of triplog,parses it and loads that array into a google map.