人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

住所から距離を算出したいです。
はてなでも以前同じ質問がされていました。
http://q.hatena.ne.jp/1283479918
私が知りたいのは、API V3 のディレクションサービスを使って
40箇所の相互の道路上の距離を知る方法です。(移動手段は車)
http://pcrice.blog129.fc2.com/blog-entry-102.html
を参考に自分でやろうとしたのですが、javascriptが分からず、挫折しました。

質問なのですが、ディレクションサービスを使い

住所1 住所2 ・・・ 住所40
住所1 0 ★ ★
住所2 ★ 0



住所40 ★ ・・・ 0

というような相互の距離の表をhtmlで出すプログラムはどのようになるのでしょうか?
マップは表示する必要はありません。
ご教授していただけると幸いです。
(先ほど同じ質問をしたのですが、ポイントを増やし再度質問しました。)

●質問者: math_boy
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●500ポイント ベストアンサー

ざっくりと作ってみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Distanec Cross Table</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
 var directionsService = new google.maps.DirectionsService(); 
 var directionsRenderer = new google.maps.DirectionsRenderer(); 

 /*
 二地点間の距離を求めて、dest (jQuery オブジェクト) に入れる
 */
 function calcDistance(p1, p2, dest) {
 var dfd = jQuery.Deferred();
console.log(p1 + " --> " + p2);
 var request = { 
 origin: p1, 
 destination: p2, 
 travelMode: google.maps.DirectionsTravelMode.DRIVING 
 }; 


 window.setTimeout(function() {
 directionsService.route(request, function(result, status) { 
 if (status == google.maps.DirectionsStatus.OK) { 

 directionsRenderer.setDirections(result); 

 // 距離を求める
 var legs = result.routes[0].legs
 var journey = 0; 
 for (var i in legs) { 
 journey += legs[i].distance.value; 
 } 

 dest.text(journey / 1000); 
console.log(journey / 1000);
 dfd.resolve();
 } 
 }); 
 }, 700); // タイマーをかまさないと、エラーが起きるっぽい

 return dfd.promise();
 }

 google.maps.event.addDomListener(window, 'load', function() {
 var mapOptions = { 
 zoom: 12, 
 center: null, 
 mapTypeId: google.maps.MapTypeId.ROADMAP, 
 scaleControl: true 
 }; 
 var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 
 directionsRenderer.setMap(mapObj); 

/*
測定したい地名の配列
*/
 var posList = [
 "東京駅",
 "静岡駅",
 "名古屋駅",
 "京都駅",
 "大阪駅",
 "神戸駅",
 ];

 /*
 表を生成する
 */
 var s = "<table border='1'>";
 s += "<tr><th>&nbsp;</th>";
 for (var col = 0 ; col < posList.length ; ++col) {
 s += "<th>" + posList[col] + "</th>"
 }
 s += "</tr>";
 for (var row = 0 ; row < posList.length ; ++row) {
 s += "<tr>";
 s += "<th>" + posList[row] + "</th>";
 for (var col = 0 ; col < posList.length ; ++col) {
 s += "<td pos_f='" + posList[row] + "' pos_t='" + posList[col] + "'></td>"
 }
 s += "</tr>";
 }
 s += "</table>";

 $("#output").html(s);

 /*
 セルを埋めてゆく
 */
 var dfd = jQuery.Deferred();
 var v = $.when()
 $("#output table tr td").each(function() {
 var e = $(this)
 if (e.attr("pos_f") != e.attr("pos_t")) {
 v = v.then(
 (function() {
 return function() {
 var from = e.attr("pos_f");
 var to = e.attr("pos_t");
 return calcDistance(from, to, e);
 }})()
 );
 } else {
 e.html("0");
 }
 });
 });


</script> 
<style>
#output table {
 border-collapse: collapse;
}
#output table tr td {
}
#gmap {
 display: none;
}
</style>
</head> 
<body> 
<div id="output"></div>

<div id="gmap"></div> 

</body> 
</html> 

jsFiddle で確認したのが、↓です。
http://jsfiddle.net/a_kuma3/EjQ6M/embedded/result/

ソースの中ほどにある posList 配列の内容を増やせば、表はどんどん大きくできます。

ただ、う?んって感じなのが、ふたつほどあって...

なので console.log とか残してあったり。
叩き台にでもなれば、と思いまして。


fiwaさんのコメント
横槍御免。 >> 行きと帰りの距離が違う << Googleマップでルート検索を行うと、出発点と目的地を入れ替えると微妙に違うルートが出てくることがあるようです。例えば、大阪駅<->神戸駅の場合だと大阪駅付近でのルートが微妙に違ってきます。こういったことが影響してるのではないかと。 f:id:fiwa:20131231201055g:image
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ