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>
