2024.11.14
いまさらNode.jsを知ろう~環境構築も~
2019.05.27
プログラミングGoogleMapsAPIで簡単に回転する矢印マーカーを使うサンプルコード
坂東です。
動態管理システムで多数の車両の位置と進行方向を表示したくなりましたが。
「Google Maps API マーカー 矢印 回転」とかでググってイマイチ使えるものがなかったので自作したのを共有します。
コード(coffee.js)
icon = { path: "M-4 4 L-4 -2 L0 -6 L4 -2 L4 4 Z", scale: 3, rotation: parseInt(kakudo), fillColor: '#DD4B39', fillOpacity: 0.9, strokeColor: '#000000', strokeWeight: 2, strokeOpacity: 0.5 } options = {} options.position = new (google.maps.LatLng)(lat, lng) options.map = gglmap options.icon = icon options.labelContent = '8' options.labelAnchor = new google.maps.Point(12, 12) marker = new MarkerWithLabel(options) marker.setMap(gglmap)
要するにこういうことやってます。
1. iconにpathでSVG要素を指定
2. rotationで回転
3. MarkerWithLabelでアイコン上に文字を描画
たんに矢印1個だけ使いたいなら「google.maps.SymbolPath.FORWARD_CLOSED_ARROW」でググるともっと簡単な方法はあります。
おわり。
【記事への感想募集中!】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!【テクノデジタルではエンジニア/デザイナーを積極採用中です!】
下記項目に1つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索