住所から距離を算出したいです。

はてなでも以前同じ質問がされていました。
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で出すプログラムはどのようになるのでしょうか?
マップは表示する必要はありません。
ご教授していただけると幸いです。
(先ほど同じ質問をしたのですが、ポイントを増やし再度質問しました。)

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/12/31 21:31:18
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153

ポイント500pt

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

<!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 配列の内容を増やせば、表はどんどん大きくできます。

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

  • 行きと帰りの距離が違う
    ルートの一番目の距離を出しているのですが、地点をひっくり返すと微妙に距離が違うんです。
  • タイマーをかまさないと、途中で止まっちゃう
    マップを非表示にしても動くんですが、早く動きすぎると途中で止まっちゃうみたいで。
    なので、1秒程度のウェイトをかませてたりします (´・ω・`)

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

id:fiwa

横槍御免。

行きと帰りの距離が違う

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

2013/12/31 20:12:17
  • id:math_boy
    a-kuma3様、fiwa様、ありがとうございました。
    お陰さまで、目的とするものを手にすることができました。
    今年も残りあとわずか、良いお年を~。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません