end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転します

google map api for javascriptで、経路の距離を算出

↓こう書きます

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
</head>
<body>
<div class="container-fluid">

<h1>google map apiによる経路探索</h1>

<h2>1. はじめに</h2>
このプログラムは、
<a href="https://developers.google.com/maps/">google map api</a>
を使用し、2点間の経路距離を算出するものです。<br>

利用に際し、google map apiの
<a href="https://developers.google.com/maps/pricing-and-plans/">利用規約</a>
を予め、ご確認下さい。<br>
<br>
google map apiによる経路計測プログラムは、次のurlも参考になります。<br>

<a href="http://www.google-mapi.com/googlemaps/route-clearness.html">
  http://www.google-mapi.com/googlemaps/route-clearness.html</a><br>
<a href="http://www.google-mapi.com/googlemaps/route-two_points.html">
  http://www.google-mapi.com/googlemaps/route-two_points.html</a>

<h2>2. スタート地点</h2>
緯度(longitude)、経度(latitude)を指定して下さい。<br>
緯度経度が分からない場合、
<a href="http://www.geocoding.jp">http://www.geocoding.jp</a>
等で調べて下さい。<br>

緯度:<input type=test id="start_lon" value="36.000181"  style="width:150px">
経度:<input type=test id="start_lat" value="139.665844" style="width:150px">

<h2>3. ゴール地点</h2>
1行に緯度(longitude)、経度(latitude)をタブ区切りで指定して下さい。
(excelからのpasteでタブ区切りになるはずです)<br>

<textarea id="goal_lon_lat"
      style="width:400px; height:70px;"
      >35.668447  139.746661
35.660783   139.704045
</textarea>

<h2>4. 経路距離の計測結果(m)</h2>
<button type="button"
    onClick="calcDist.startCalcDists()">経路計測 実行</button><br>
google map apiから返された座標と経路距離(m)を表示します。<br>
指定したゴール座標とgoogle map apiから返された値が異なるのは
google map apiが最寄りの道路座標を探索している為かと思います。<br>
google map apiの算出結果を表示しているだけで、値の正しさは確認していません...<br>
<textarea id="calcResult"
      style="width:400px; height:70px;"></textarea>

</div>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="js/calc-dist.js"></script>
<script>
 $(document).ready(function(){
 });
</script>
</body>
</html>
(function() {
    var directionsService = new google.maps.DirectionsService();
    var SLEEP_CALC_DIST = 500; //msec. google map apiでroute計算する実行間隔
    
    var CalcDist = function() {};
    CalcDist.prototype = {
        
        startCalcDists: function(){
            $('#calcResult').val(''); //結果欄のclear
            
            //スタート地点の座標
            this.start_lon_lat =
                [ $('#start_lon').val(), $('#start_lat').val() ];
            //ゴール地点の座標
            this.goals_str =  $('#goal_lon_lat').val().split("\n");
            
            this.calcDists(0);
        },

        calcDists: function(i){
            var goal_lon_lat = this.goals_str[i].split("\t");
            if(goal_lon_lat.length < 2){
                return false;
            }

            this.calcDist(new google.maps.LatLng( this.start_lon_lat[0],
                                                  this.start_lon_lat[1]),
                          new google.maps.LatLng( goal_lon_lat[0],
                                                  goal_lon_lat[1]) );

            var this_obj = this;
            setTimeout( function(param_i) {
                this_obj.calcDists(param_i);
            }, SLEEP_CALC_DIST, i+1);

        },

        calcDist: function(start_lon_lat, goal_lon_lat){
            
            //google map apiによる経路探索
            directionsService.route(
                {origin: start_lon_lat,
                 destination: goal_lon_lat,
                 travelMode: google.maps.DirectionsTravelMode.DRIVING,
                 unitSystem:
                 google.maps.DirectionsUnitSystem.METRIC, //m表示
                 optimizeWaypoints: true,//最適化された最短距離にする
                 avoidHighways: true,    //true=高速道路を使用しない
                 avoidTolls: true        //true=有料道路を使用しない
                },
                function(result, status) {
                    //google map apiからOKが返ってきたら、結果欄に表示
                    if (status == google.maps.DirectionsStatus.OK) {
                        //google map apiは複数のルートを返しますが
                        //「optimizeWaypoints: true」により
                        //最初が最短経路のはず...
                        var distance =
                            result.routes[0].legs[0].distance.value;
                        var end_location =
                            String( result.routes[0].legs[0].end_location );
                        
                        var match_result = end_location.match(/([\d\.]+)/g);
                        
                        var caltResultStr =
                            [match_result[0],
                             match_result[1],
                             distance].join("\t");
                        $('#calcResult').val(
                            $('#calcResult').val()+ caltResultStr+"\n");
                        
                    }
                });
        }
    };

    window.calcDist = new CalcDist();
})();