GoogleMapの地図上にPolygonで矢印を引く

技術関係

GoogleMapの地図上にPolygonで矢印を書いてみる。

似たようなのにSymbolみたいなのもあるけど、これだと少し細いのでPolygonで愚直に引いてみる。

と言っても、↑矢印をプログラムで描く;単純ベクトル加算法に紹介されている方法をGoogle Mapに置き換えただけ。なんかもう少しマシな方法がありそうだけど、とりあえず。

<!DOCTYPE html>
<html>
<head>
      <metaname="viewport"content="initial-scale=1.0, user-scalable=no">
      <metacharset="utf-8">
      <title>地図上に矢印を描く</title>
      <style>
#map {
width:  800px;
height: 600px;
}
</style>
  </head>
<body>
<divid="map"></div>
<script>
          function initMap(){
              var map =new google.maps.Map(document.getElementById('map'),{
                   zoom:13,
                   center:{lat:33.589909, lng:130.420123}
              });
               A =new google.maps.LatLng({lat:33.585762, lng:130.376263});
               B = map.getCenter();
              var lines = arrowPos3(A, B,0.003,0.001,0.002,0.002);
              var arrow_path =new google.maps.Polygon({
                   path: lines,
                   geodesic:true,
                   strokeColor:'#FF0000',
                   strokeOpacity:1.0,
                   strokeWeight:2
              });
               arrow_path.setMap(map);
              // 以下のURLを参考に単純に置き換えてみる
              // see. http://k-hiura.cocolog-nifty.com/blog/2010/11/post-2a62.html
              function arrowPos3(f, t, w, w2, h, h2){
                  // 直接、計算もできるけど、分かりづらかったのでサンプルに沿って置き換えておく
                   A =[f.lng(), f.lat()];
                   B =[t.lng(), t.lat()];
                  
                  var Vx= B[0]-A[0];
                  var Vy= B[1]-A[1];
                  var v = Math.sqrt(Vx*Vx+Vy*Vy);
                  var Ux= Vx/v;
                  var Uy= Vy/v;
                  
                  var L =[0,0];
                   L[0]  = B[0] - Uy*w  - Ux*h;
                   L[1]  = B[1] + Ux*w  - Uy*h;
                  var R =[0,0];
                   R[0]  = B[0] + Uy*w  - Ux*h;
                   R[1]  = B[1] - Ux*w  - Uy*h;
                  var ML =[0,0];
                   ML[0] = B[0] - Uy*w2 - Ux*h2;// L[0]のwがw2,hがh2
                   ML[1] = B[1] + Ux*w2 - Uy*h2;
                  var MR =[0,0];
                   MR[0] = B[0] + Uy*w2 - Ux*h2;// R[0]のwがw2,hがh2
                   MR[1] = B[1] - Ux*w2 - Uy*h2;
                  var AL =[0,0];
                   AL[0] = A[0] - Uy*w2;
                   AL[1] = A[1] + Ux*w2;
                  var AR =[0,0];
                   AR[0] = A[0] + Uy*w2;
                   AR[1] = A[1] - Ux*w2;
                  // 最後にGoogleMapのLatLngオブジェクトの配列に置き換えておく
                  var lines =[
                      new google.maps.LatLng(AR[1], AR[0]),
                      new google.maps.LatLng(MR[1], MR[0]),
                      new google.maps.LatLng(R[1], R[0]),
                      new google.maps.LatLng(B[1], B[0]),
                      new google.maps.LatLng(L[1], L[0]),
                      new google.maps.LatLng(ML[1], ML[0]),
                      new google.maps.LatLng(AL[1], AL[0]),
                      new google.maps.LatLng(AR[1], AR[0]),
                  ];
                  return(lines);
              }
          }
      </script>
<scriptsrc="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" asyncdefer></script>
</body>
</html>
タイトルとURLをコピーしました