- （ルート検索API その1） ルート経路検索の基本マップ
- （ルート検索API その2） Waypoint（中間地点、経由地点）の複数設定+ルートディスプレイ
- （ルート検索API その3） 通過地点（stopover）の設定（マーカでない経由ポイントを設定）
- （ルート検索API その4） preserveViewport／ルート全体を表示させずに地図の指定座標を表示させる方法
- （ルート検索API その5） 合計距離+区間距離をルートディスプレイとは別に地図の外に表示させる
◆ 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
関連記事一覧
ルート検索の基本マップ／ルート検索API（Direction API）
通過地点（stopover）の設定（マーカでない経由ポイントを設定）／ルート検索API（Direction API）
Waypoint（中間地点、経由地点）の複数設定+ルートディスプレイ／ルート検索API（Direction API）
トータルの合計距離+地図から行きたい場所を探して、出発、中継点、到着点を入力クリックしてドライブルート経路検索
preserveViewport ルート全体を表示させずに地図を指定座標、ズームレベルで表示させる方法／ルート検索API（Direction API）
ルート検索のドライブルートのポリライン（Polylines）を複数地図に表示させる／ルート検索API（Direction API）
マップ（地図）をクリックしてルート経路検索／Google Maps Directions API V3 
ルート検索結果のルートポリライン（Polylines）を地図から削除して消す方法／ルート検索API（Direction API）
スポンサードリンク
Leave a Comment