アシアルの中の人が技術と思いのたけをつづるブログ

GoogleMapの地図上に表示したラインの距離を求める方法

タグ [　 Tech　 JavaScript　 GoogleMap　 ]
こんにちは。笹亀です。

最近は、冬の寒さと乾燥した場所に弱いもので、
もっぱら体調がよくない日々をおくっています。
特に寒さには弱く、社内で一人だけ上着を着た状態で日々の業務をしていることが多く、軽く浮いております(;´▽｀A``

今回は、以前にGoogleMapを使ったときに行ったことを紹介したいと思います。
地図を表示したいときによく使用されるGoogleMapですが、地図を表示するだけではなく、GoogleMapの地図上にライン（線）を引くこともできます。
しかし、その引いたラインの距離を求めるにはGoogleMapの標準メソッドでは距離を取得するメソッドは用意されていません。
そこで、複数の線の緯度経度情報からラインの距離を算出する方法を紹介します。

下記のソースは、実際にGoogleMap上にラインを引く処理とラインの距離を算出することができる状態のサンプルソースになります。ところどころの処理にコメントを記述しておりますので、参考にしていただけたらと思います。
　※少し長文になりますが、ご了承くださいませ。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  6.   <title>SampleMaps</title>
  7.   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAb3kQrCmW9jK9pfLnTGwrDBRy7x2pvRmU9nyFXjHNvjAIsiOmuhQWNSE0_7Zgs4yiUBfBlWoOYWPbzg" type="text/javascript"></script>
  8.   <script type="text/javascript">
  9.     var deflon = 139.759409;
  10.     var deflat = 35.707014;
  11.     var defzoom = 14;
  12.     var mapDiv;
  13.     var map;
  14.     var marker;
  15.     var DistPoint = new Array();
  16.     var DistOL = null;
  17.     //地図を表示するための初期設定
  18.     function initMap() {
  19.       map = new GMap2(mapDiv);
  20.       map.addControl(new GScaleControl());
  21.       map.addControl(new GLargeMapControl());
  22.       map.addControl(new GMapTypeControl(true));
  23.       map.setCenter(new GLatLng(deflat, deflon), defzoom);
  24.  
  25.       //地図をクリックしたときのアクション
  26.       GEvent.addListener(map, "click", function(overlay, point) {
  27.         if(overlay == null){
  28.           DistPoint.push(point);
  29.           if(DistPoint.length > 1) {
  30.             line_view();
  31.           }else{
  32.             try {
  33.               map.removeOverlay(marker);
  34.             }catch(error) {
  35.             
  36.             }
  37.             marker = new GMarker(point,{ draggable:true });
  38.             map.addOverlay(marker);
  39.           }
  40.         }
  41.         //マウスのボタンを離したときのアクション
  42.         GEvent.addListener(marker, "mouseup", function() {
  43.           DistPoint.shift();
  44.           DistPoint.unshift(marker.getPoint());
  45.           line_view();
  46.         });
  47.       });
  48.  
  49.       //地図のドラッグを終了時のアクション
  50.       GEvent.addListener(map, "moveend", function(overlay, point) {
  51.         var zahyo = map.getCenter();
  52.       });
  53.     }
  54.     //ライン（線）を表示する処理
  55.     function line_view(){
  56.       try {
  57.         map.removeOverlay(DistOL);
  58.       }catch(error){}
  59.       //ラインの色と太さと濃さを指定してオブジェクト生成
  60.       DistOL = new GPolyline(DistPoint, "#6600cc", 10, 0.5 );
  61.       map.addOverlay(DistOL);
  62.       
  63.       //ここから線を表示する処理
  64.       var dist = 0;
  65.       var i = 0;
  66.       var str = "";
  67.       while(i < DistPoint.length){
  68.         str = str + DistPoint[i].y + "," +  DistPoint[i].x + "|";
  69.         i++;
  70.       }
  71.       //ここまで
  72.       
  73.       //ここから線の距離を求める処理
  74.       var i = 0;
  75.       while(i < DistPoint.length - 1){
  76.         dist += Gdistance(DistPoint[i], DistPoint[++i]);
  77.       }
  78.       //ここまで
  79.  
  80.       document.getElementById("distance").innerHTML = "引いた線の距離 約 " + (dist/1000) + "km";
  81.     }
  82.  
  83.     //初期化呼び出し
  84.     function initPage() {
  85.       mapDiv = document.getElementById("map");
  86.       initMap();
  87.     }
  88.     
  89.     //ひとつ前に戻る処理
  90.     function clearPointBack() {
  91.       var num = DistPoint.length - 1;
  92.       DistPoint.pop();
  93.       line_view();
  94.     }
  95.  
  96.     //線をクリアする処理
  97.     function clearPoints() {
  98.       DistPoint = new Array();
  99.       map.removeOverlay(DistOL);
  100.       document.getElementById("distance").innerHTML = "引いた線の距離 約 0km";
  101.       DistOL = null;
  102.     }
  103.     
  104.     //2点の線から距離を求める
  105.     function Gdistance(from , to) {
  106.       var from_x = from.x * Math.PI / 180;
  107.       var from_y = from.y * Math.PI / 180;
  108.       var to_x = to.x * Math.PI / 180;
  109.       var to_y = to.y * Math.PI / 180;
  110.       var deg = Math.sin(from_y) * Math.sin(to_y) + Math.cos(from_y) * Math.cos(to_y) * Math.cos(to_x-from_x);
  111.       var dist = 6378140 * (Math.atan( -deg / Math.sqrt(-deg * deg + 1)) + Math.PI / 2);
  112.       return Math.round(dist);
  113.     }
  114.   </script>
  115. </head>
  116.  
  117. <body onload="initPage()" onunload="GUnload()">
  118.   <div id="map" style="width: 350px; height: 350px"></div>
  119.   <div id="distance" style="font-size: 70%;">引いた線の距離 約 0km</div>
  120.   <form>
  121.     <input type="button" onClick="clearPoints()" value="線をクリア" />
  122.     <input type="button" onClick="clearPointBack()" value="ひとつ前に戻る" />
  123.   </form>
  124. </body>
  125. </html>
実際に作成した地図のサンプルは以下のようになります。
線を引いていくと、距離が加算されていきます。

ここで紹介したラインの距離は必ずしも正確な値とは限りません。
また、傾斜などを考慮した距離にもなっていませんのでご注意ください。

この際、傾斜を考慮した計算を入れてより正確な値を求められたら、より使い道があるものになっていいなと思います。（実際にそういったサイトも見つけましたが・・

GoogleMapはただ単に地図を表示する以外にも自分の画像を地図にしてみたりと、
いろいろな使い方ができます。
これを機会に是非とも、GoogleMapを使ってみてはいかがでしょうか。

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事