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>
