我有一个使用localstorage的应用程序，并且在该存储中有多个lat和lon值，我希望在地图上显示。现在我已经设法在地图中为我的循环中的第一个地图输出所有值，但是我如何设法为剩余的地图执行此操作？
我显示结果的功能：
function displayRides(){
// similar to the finish function, except it handles multiple rides
var localLat;
var localLon;
var marker;
var path = [];
var integer;
//pagination variables
var start = 0;
// add pagination buttons to page
$(".content").append("<div><input type='submit' value='previous'/><div>Ride: "+ (start + 1) +"</div><input type='submit' value='next'/></div><br />");
// this will display all the rides on the page
var ride = JSON.parse(localStorage.getItem("rides"));
// test this later
if(ride == undefined || ride == null){ console.log("there are no rides available")}
// loop each ride
$.each(ride, function (i) {
var time = this[1].time;
var rideDist = this[2].totalDistance.toFixed(2);
$.each(ride[i], function (j) {
if(this.date != undefined){
var integer = j;
localLat = this.info[j].data.lat;
localLon = this.info[j].data.lon;
//push to path in order to draw path on map
path.push(new google.maps.LatLng(localLat, localLon));
$(".content").append("<div><h2>Date: " + this.date + "</h2></div><br />");
$(".content").append("<div><h2>Time: " + time + "</h2></div><br />");
$(".content").append("<div><h2>Distance: " + rideDist + "</h2></div><br />");
// add map and draw route
$(".content").append("<div id='mapDiv'></div><br />");
//add delete button
$(".content").append("<div><button><h2>Delete Ride</h2></button</div><br />");
}
});
});
var latlng = new google.maps.LatLng(localLat, localLon);
//specify map options
var myOptions = {
zoom: 11,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
//create the map
map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
// draw path
var flightPath = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FFAF04',
strokeOpacity: 2.0,
strokeWeight: 3
});
flightPath.setMap(map);
}
我的本地存储：
乘坐：
[[{"date":"13/4/2014","info":[{"id":1,"data":{"speed":0,"distance":0,"lat":53.56734,"lon":-1.443534}},{"id":2,"data":{"speed":26.286480658774042,"distance":0.4381080109795674,"lat":53.5634,"lon":-1.443534}},{"id":3,"data":{"speed":12.943089461363288,"distance":0.21571815768938812,"lat":53.56534,"lon":-1.443534}},{"id":4,"data":{"speed":0.6271393863606013,"distance":0.010452323106010021,"lat":53.565434,"lon":-1.443534}},{"id":5,"data":{"speed":0.6271393863037149,"distance":0.010452323105061915,"lat":53.56534,"lon":-1.443534}},{"id":6,"data":{"speed":12.943089461410691,"distance":0.21571815769017819,"lat":53.5634,"lon":-1.443534}},{"id":7,"data":{"speed":19.61478506003074,"distance":0.3269130843338457,"lat":53.56634,"lon":-1.443534}},{"id":8,"data":{"speed":19.614785060068666,"distance":0.3269130843344778,"lat":53.5634,"lon":-1.443534}},{"id":9,"data":{"speed":196.14785060101815,"distance":3.2691308433503026,"lat":53.534,"lon":-1.443534}},{"id":10,"data":{"speed":4.003017359194785,"distance":0.06671695598657974,"lat":53.5334,"lon":-1.443534}},{"id":11,"data":{"speed":7.161421261342885,"distance":0.11935702102238141,"lat":53.5334,"lon":-1.44534}},{"id":12,"data":{"speed":7.161421261294456,"distance":0.11935702102157426,"lat":53.5334,"lon":-1.443534}},{"id":13,"data":{"speed":0.31960717258462806,"distance":0.0053267862097438005,"lat":53.5334,"lon":-1.4434534}},{"id":14,"data":{"speed":0.3196071725800495,"distance":0.005326786209667492,"lat":53.5334,"lon":-1.443534}},{"id":15,"data":{"speed":7.161421261342885,"distance":0.11935702102238141,"lat":53.5334,"lon":-1.44534}},{"id":16,"data":{"speed":31.960717240968293,"distance":0.5326786206828049,"lat":53.5334,"lon":-1.4534}},{"id":17,"data":{"speed":319.6071555364947,"distance":5.326785925608245,"lat":53.5334,"lon":-1.534}},{"id":18,"data":{"speed":76.92778075556625,"distance":1.2821296792594374,"lat":53.5334,"lon":-1.5534}},{"id":19,"data":{"speed":7.692778099085561,"distance":0.12821296831809267,"lat":53.5334,"lon":-1.55534}}]},{"time":"00:00:15"},{"totalDistance":12.51865476992974}],[{"date":"13/4/2014","info":[{"id":1,"data":{"speed":0,"distance":0,"lat":53.5334,"lon":-1.55534}},{"id":2,"data":{"speed":67.1172577226746,"distance":1.1186209620445766,"lat":53.52334,"lon":-1.55534}},{"id":3,"data":{"speed":6.711725772243759,"distance":0.11186209620406266,"lat":53.522334,"lon":-1.55534}},{"id":4,"data":{"speed":6.711725772310127,"distance":0.11186209620516879,"lat":53.52334,"lon":-1.55534}},{"id":5,"data":{"speed":67.11725772264613,"distance":1.1186209620441023,"lat":53.5334,"lon":-1.55534}},{"id":6,"data":{"speed":0.40030173590525686,"distance":0.006671695598420948,"lat":53.53334,"lon":-1.55534}},{"id":7,"data":{"speed":0.4003017359716243,"distance":0.006671695599527071,"lat":53.5334,"lon":-1.55534}},{"id":8,"data":{"speed":133.03361023752902,"distance":2.2172268372921504,"lat":53.55334,"lon":-1.55534}},{"id":9,"data":{"speed":6.631665425024785,"distance":0.11052775708374642,"lat":53.554334,"lon":-1.55534}},{"id":10,"data":{"speed":7.688974523077317,"distance":0.12814957538462196,"lat":53.554334,"lon":-1.5534}},{"id":11,"data":{"speed":76.8897449949351,"distance":1.281495749915585,"lat":53.554334,"lon":-1.534}},{"id":12,"data":{"speed":37.25585591042068,"distance":0.6209309318403446,"lat":53.554334,"lon":-1.5434}},{"id":13,"data":{"speed":7.6889745230241635,"distance":0.12814957538373606,"lat":53.554334,"lon":-1.54534}},{"id":14,"data":{"speed":7.688974523077317,"distance":0.12814957538462196,"lat":53.554334,"lon":-1.5434}},{"id":15,"data":{"speed":37.25585591044057,"distance":0.6209309318406762,"lat":53.554334,"lon":-1.534}},{"id":16,"data":{"speed":37.25585591042068,"distance":0.6209309318403446,"lat":53.554334,"lon":-1.5434}},{"id":17,"data":{"speed":7.6889745230241635,"distance":0.12814957538373606,"lat":53.554334,"lon":-1.54534}}]},{"time":"00:00:12"},{"totalDistance":8.458950949045422}]]
请注意，我试过以下但没有运气：
我做错了什么，它不会让我显示多张地图？
任何帮助将不胜感激，谢谢。