Googleマップ API•テック

Google Maps（グーグルマップ）上の２地点の距離／方角を取得する方法

2021年6月3日 by single コメントはまだありません

今回はgeometryライブラリを使って２地点の距離／方角を取得してみます。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Google Maps（グーグルマップ）上の２地点の距離／方角を取得する方法

サンプル

マーカー１とマーカー２はドラッグ可能なので、ドラッグしてみてください。

地点１
地点２
２地点の距離(m)
２地点の方角

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Sample Map</title>
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap&libraries=geometry" >
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:80%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      var marker1;
      var marker2;
      var Latlng1;
      var Latlng2;
      var distance;
      var heading;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         Latlng1 = new google.maps.LatLng(35.686716459017205, 139.75694680150997);
         Latlng2 = new google.maps.LatLng(35.679890109918894, 139.75560807780232);
         var mapOptions = {
           zoom: 15,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         marker1 = new google.maps.Marker({
            position: Latlng1,
            label:'1',
            draggable:true,
            map: map,
            title: '地点１'
         });
         marker2 = new google.maps.Marker({
            position: Latlng2,
            label:'2',
            draggable:true,
            map: map,
            title: '地点２'
         });
         marker1.addListener('drag', function(event) {
            Latlng1 = event.latLng;
            resetTwoPointsInfo();
         });
         marker2.addListener('drag', function(event) {
            Latlng2 = event.latLng;
            resetTwoPointsInfo();
         });
         resetTwoPointsInfo();
      }
      function resetTwoPointsInfo() {
         document.getElementById('point1').innerHTML = Latlng1;
         document.getElementById('point2').innerHTML = Latlng2;
         heading = google.maps.geometry.spherical.computeHeading(
            Latlng1,
            Latlng2
         );
         distance = google.maps.geometry.spherical.computeDistanceBetween(
            Latlng1,
            Latlng2
         );

         document.getElementById('distance').innerHTML = distance;
         document.getElementById('heading').innerHTML = heading;
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <table>
      <tr><th>地点１</th><td id="point1"></td></tr>
      <tr><th>地点２</th><td id="point2"></td></tr>
      <tr><th>２地点の距離(m)</th><td id="distance"></td></tr>
      <tr><th>２地点の方角</th><td id="heading"></td></tr>
   </table>
</body>
</html>

デモ

２地点の距離を測定する

２地点の距離を測定するには「computeDistanceBetween」を利用します。

パラメータ

引数値
第１引数地点１（緯度／経度）
第２引数地点２（緯度／経度）
第３引数半径（任意）
デフォルトは地球の半径。基本指定しなくていいと思います。

戻り値

２地点の距離を単位：メートルで返します。

２地点の方角を取得する

２地点の方角を取得するには「computeHeading」を利用します。

パラメータ

引数値
第１引数地点１（緯度／経度）
第２引数地点２（緯度／経度）

戻り値

地点１を起点とした地点２の方角を時計回りに北：０～東：９０～南～１８０～西：ー９０に値を返す。

値の範囲は「ー１８０（南）～１８０（南）」になります。

やってみたら、実際、ー１８０はないみたいで、南は１８０になるようですね。

どのような値が返ってくるかサンプルのマーカー２をドラッグして、どんな値が返ってきているのか確認してみてください。

ご参考

関連ページ