【发布时间】：2016-10-11 21:47:27
【问题描述】：
我正在努力使用 Google Maps javascript API。我正在尝试自己解析 DirectionsResult 以显示一些数据，然后将它们传递给数据库。
但是通过循环迭代
for (i = 0; i < response.routes.length; i++)
{ var route = response.routes[i];`
似乎没有赶上路线[i]提供的所有数据。我正在尝试显示路线摘要，但如果 index 是用 i 定义的，则只能显示 route[1] 摘要。如果我用数字定义 routeIndex 就可以了。
这是我的代码 sn-p：
<script src="http://maps.google.com/maps/api/js&libraries=geometry" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null; // km
function initialize() {
// Default the map view to Finland.
var mapOptions = {
center: new google.maps.LatLng(65.25, 25.35),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
zoomControl: false,
zoom: 5
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({
map: map
});
}
function route() {
var request = {
origin: "Sastamala+Finland",
destination: "Tampere+Finland",
travelMode: google.maps.DirectionsTravelMode.DRIVING,
provideRouteAlternatives: true
}
// Make the directions request
directionService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(response);
parseJson(response);
console.log(response);
} else {
alert("Directions query failed: " + status);
}
});
}
// Parse JSON
function parseJson(response) {
for (i = 0; i < response.routes.length; i++) {
var route = response.routes[i];
// Route atribuutit
// Push alternative routes to results div
document.getElementById("results").innerHTML = "";
document.getElementById("results").innerHTML += route.summary;
console.log(route.summary);
for (j = 0; j < route.legs.length; j++) {
var leg = route.legs[j];
// Leg atribuutit
for (k = 0; k < leg.steps.length; k++) {
var step = leg.steps[k];
// Steps atribuutit
}
}
}
} // End of JSON parse
</script>html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 90%;
width: 70%;
float: left;
}
#results {
height: 90%;
width: 30%;
float: right;
}
#controls {
position: absolute;
top: 50px;
font-family: sans-serif;
font-size: 11pt;
}<body onload="initialize();">
<div id="controls"></div>
<input type="submit" onclick="route()"/>
<div id="map"></div>
<div id="results"></div>
</body>我知道 DirectionsResult.routes.summary 不再记录，但 DirectionsRenderer 可以提供与“建议路线”相同的功能，因此应该可以实现。
UPDATE1：我通过删除所有不必要的东西来更新我的代码。代码返回 2 条路线的数组，我可以从控制台看到，但是当我尝试显示每条路线的摘要时，它始终只显示 route[1].summary，即“Sastamalantie/Reitti 249 ja Porintie /Reitti 11" 其中 route[0].summary 是 "Reitti 12" 并且不显示。在这两种情况下输出相同的东西：
1.document.getElementById("results").innerHTML += route.summary;
2.console.log(route.summary);
UPDATE2：提供的答案解决了我的问题，但我遇到了与同一迭代循环有关的另一个问题。
// Make the directions request
directionService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(response);
parseJson(response);
console.log(response);
google.maps.event.addListener(directionsRenderer, 'routeindex_changed', function() {
console.log(this.getRouteIndex());
});
} else {
alert("Directions query failed: " + status);
}
});
}
// Parse JSON
function parseJson(response) {
var resultsHTML = "";
for (i = 0; i < response.routes.length; i++) {
var route = response.routes[i];
// Route atribuutit
route.overview_path;
var pathPolyline = route.overview_polyline;
var routeName = route.summary;
resultsHTML += "<p onclick='directionsRenderer.setRouteIndex(i)'>" + (i+1) + ": " + routeName + " ";
console.log(routeName); // setRouteIndex(i) returns always 3.
for (j = 0; j < route.legs.length; j++) {
var leg = route.legs[j];
var routeDistance = leg.distance.text;
var routeDuration = leg.duration.text;
resultsHTML += routeDistance + " " + routeDuration + "</p>";
// Leg atribuutit
for (k = 0; k < leg.steps.length; k++) {
var step = leg.steps[k];
// Steps atribuutit
}
}
}
// Push alternative routes to results div
document.getElementById("results").innerHTML = resultsHTML;
我现在得到的 route.summary 显示应该是这样，但是当每个 <p> 被点击时，resultsHTML += "<p onclick='directionsRenderer.setRouteIndex(i)'>" + (i+1) + ": " + routeName + " "; 行中，setRouteIndex(i) 返回到控制台值 3 并绘制地图路线 [3]，它应该在哪里为每个<p> 标签定义一个对应的路由索引。但是 i+1 正在为每条路线显示正确的 routeIndex 编号，例如。 1：路线，2：路线。
【问题讨论】：
-
请提供一个minimal reproducible example 来证明您的问题。
-
我更新了我的第一个帖子，见上文。
-
你的代码 sn-p 有语法错误。
标签： javascript json google-maps google-maps-api-3