↓こう書きます
<!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(); })();
