はてなでも以前同じ質問がされていました。
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で出すプログラムはどのようになるのでしょうか?
マップは表示する必要はありません。
ご教授していただけると幸いです。
(先ほど同じ質問をしたのですが、ポイントを増やし再度質問しました。)
ざっくりと作ってみました。
<!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> </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 とか残してあったり。
叩き台にでもなれば、と思いまして。
横槍御免。
Googleマップでルート検索を行うと、出発点と目的地を入れ替えると微妙に違うルートが出てくることがあるようです。例えば、大阪駅<->神戸駅の場合だと大阪駅付近でのルートが微妙に違ってきます。こういったことが影響してるのではないかと。
2013/12/31 20:12:17