私はGoogleマップのjavascript APIに苦労しています。私はDirectionsResultを自分で解析していくつかのデータを表示し、後でそれらをデータベースに渡そうとしています。GoogleマップJavascript API v3経路の反復
しかしループ
for (i = 0; i < response.routes.length; i++)
{ var route = response.routes[i];`
による反復は、[i]はルートから提供されたすべてのデータに追いつくようには見えません。私は経路の要約を表示しようとしていますが、索引がiで定義されていれば、ルート[1]サマリーを得ることはできません。私が数でrouteIndexを定義している場合、それはうまく動作します。私はそれが必要がありますのでDirectionsResult.routes.summaryはもう文書化されていないが、DirectionsRendererは、「推奨ルート」と同じ機能を提供することができます知っている
<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>：ここ
は私のコードスニペットです作ることができる。UPDATE1：すべての不要なものを取り除いてコードを更新しました。コードはコンソールから見ることができる2つのルートの配列を返しますが、各ルートのサマリーを表示しようとすると、常にルート[1] .summaryだけが表示されます。サマラーマンティ/レイティ249 ja Porintie/Reitti 11 "wheresルート[0]。summaryは" Reitti 12 "であり、表示されません。どちらの場合も同じこと出力： 1. document.getElementById("results").innerHTML += route.summary; 2. console.log(route.summary);
アップデート2：提供答えは私の問題を解決しますが、私は同じ繰り返しループに関する別の問題のために出会いました。
// 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;
私は今、各<p>は、値3を慰めるためにsetRouteIndex(i)リターンをクリックすると、マップのルートに描画されたときに、[3]、それがために定義する必要がありますのwheresそれのように表示route.summaryがあることが、ラインresultsHTML += "<p onclick='directionsRenderer.setRouteIndex(i)'>" + (i+1) + ": " + routeName + " ";にすべき取得しています各<p>は対応するrouteIndexにタグを付けます。しかし、i + 1は各ルートの正しいrouteIndex番号を表示しています。 1：ルート、2：ルート。
[MCVE]あなたの問題を示している提供してください。 – geocodezip
私の最初の投稿を更新しました。上記を参照してください。 – jaska120
コードスニペットに構文エラーがあります。 – geocodezip