我很苦惱Google Maps JavaScript API。我試圖通過自己解析DirectionsResult來顯示一些數據，然後將它們傳遞給數據庫。Google Maps Javascript API v3路線迭代
然而通過循環
for (i = 0; i < response.routes.length; i++)
{ var route = response.routes[i];`
迭代似乎沒有趕上從路線[I]所提供的所有數據。我正在嘗試顯示路線摘要，但如果索引是用i定義的，則無法獲取路線[1]摘要。如果我用一個數字定義routeIndex，那麼它工作得很好。
這裏是我的代碼片段：
<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({
\t 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) {
\t directionsRenderer.setDirections(response);
\t parseJson(response);
\t console.log(response);
} else {
alert("Directions query failed: " + status);
}
});
}
\t
\t \t // Parse JSON
\t \t function parseJson(response) {
\t for (i = 0; i < response.routes.length; i++) {
\t \t var route = response.routes[i];
\t \t \t // Route atribuutit
\t // Push alternative routes to results div \t
\t \t document.getElementById("results").innerHTML = "";
\t \t document.getElementById("results").innerHTML += route.summary;
\t \t console.log(route.summary); \t
\t \t for (j = 0; j < route.legs.length; j++) {
\t var leg = route.legs[j];
\t // Leg atribuutit
\t \t \t for (k = 0; k < leg.steps.length; k++) {
\t \t \t var step = leg.steps[k];
\t // Steps atribuutit
\t \t
}
}
} \t \t
} // 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 {
\t position: absolute;
\t top: 50px;
font-family: sans-serif;
font-size: 11pt;
}<body onload="initialize();">
\t <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「wherts 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應該是，但行resultsHTML += "<p onclick='directionsRenderer.setRouteIndex(i)'>" + (i+1) + ": " + routeName + " ";如果單擊各個<p>，setRouteIndex(i)返回到控制檯值3，並繪製在地圖上的路線[3]，哪來它應該定義每個<p>標記相應的routeIndex。但是，i + 1正在爲每個路由顯示正確的routeIndex編號，例如。 1：路線，2：路線。
請提供[MCVE]演示您的問題。 – geocodezip
我更新了我的第一篇文章，見上文。 – jaska120
您的代碼段中存在語法錯誤。 – geocodezip