読者です 読者をやめる 読者になる 読者になる

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
       <meta charset="utf-8">
       <title>地図上に矢印を描く</title>
       <style>
            #map {
                width:  800px;
                height: 600px;
            }
        </style>
   </head>
    <body>
        <div id="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>
        <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" async defer></script>
    </body>
</html>