スポンサードリンク

合計距離+区間距離をルートディスプレイとは別に地図の外に表示させる/ルート検索API(Direction API)

◆ Google Maps API v3 / 合計距離+区間距離をルートディスプレイとは別に地図の外に表示させるマップ

ルート検索地図の右側に表示されるルートディスプレイですが、中間地点が多いと、トータルでの距離がわかりません。

合計距離だけは表示しておきたいところ・・・・・

下記script朱書き部参考としてください。

以前のサンプルも参照ください。

<script type=”text/javascript”>
var center = new google.maps.LatLng(35.67849, 139.39178);
var zoom = 10;
var mapTypeId = google.maps.MapTypeId.ROADMAP
</script>
<script type=”text/javascript”>
var rendererOptions =
{
draggable: true,
preserveViewport:false
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
var tokyo= new google.maps.LatLng(35.68407, 139.63623);
function initialize()
{
var myOptions =
{
center: center,
zoom: zoom,
mapTypeId: mapTypeId
};
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(“directionsPanel”));
google.maps.event.addListener(directionsDisplay, ‘directions_changed’, function()
{
computeTotalDistance(directionsDisplay.directions); //◆総距離合計
});
calcRoute();
}
function calcRoute()
{
var request =
{
origin: “東京”,
destination: “大阪”,
waypoints:[
{
location: “静岡”,
stopover:true
},
{
location: “名古屋”,
stopover:true
}
],
travelMode: google.maps.DirectionsTravelMode.DRIVING,//ドライビングモード指定(車)
provideRouteAlternatives: false, //オルタネイティブルートの表示
unitSystem: google.maps.DirectionsUnitSystem.METRIC,//単位km表示
optimizeWaypoints: true,//最適化された最短距離にする。
avoidHighways: false,//trueで高速道路を使用しない
avoidTolls: false //trueで有料道路を使用しない
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
document.getElementById(‘distance’).innerHTML+=   +response.routes[0].legs[0].distance.value /1000 + ” km”;
document.getElementById(‘distance1′).innerHTML+=   response.routes[0].legs[1].distance.value /1000 + ” km”;
document.getElementById(‘distance2′).innerHTML+=   response.routes[0].legs[2].distance.value /1000 + ” km”;
directionsDisplay.setDirections(response);
}
});
}
//◆総距離合計
function computeTotalDistance(result)
{
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++)
{
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById(“total”).innerHTML = total + ” km”;
}
window.onload=initialize;
</script>

◆ Google Maps API v3 合計距離+区間距離をルートディスプレイとは別に地図の外に表示させるサンプルデモ

◆Google Maps JavaScript API V3

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">