MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2022.09.26

地図上の図形にイベントを定義する方法

Vuejs+地図上の図形にイベント定義 メイン画像

みなさん、こんにちは。

Vuejs紹介シリーズの第5回目は、地図上に描いた図形にイベントを定義したいと思います。

 

地図上に図形を描くライブラリは、googleMapが提供しているDrawingManagerを利用したいと思います。DrawingManagerは、地図上にマーカー、ポリゴン、ポリライン、矩形、円を描画することができます。今回は矩形を使って地図上に図形を描いてみましょう。

 

【DrawingManager作成 / イベントの定義】

まず、DrawingManagerを作成します。コントロールはデフォルトまま利用します。

DrwingManagerのイベントは、こちらで定義しているイベントを利用します。

今回は矩形(rectangle)を利用するので、イベントは「rectanglecomplete」となります。そのイベントで呼び出された際の引数から描画した図形情報が取得できるため、取得した図形に対して、イベントを定義します。※地図の表示方法は、過去の記事を参考にしてください。

<script> export default { data: () => ({ // googleMap関連 google: null, ・・・ drawingManager: null, polygon: null, ・・・ }, mounted : function(){ new Loader({・・・}) .load() .then((google) => { this.google = google; // 地図の初期化 this.map = new google.maps.Map(document.getElementById(‘map’), {・・・}); // ↓ // こちらにレスポンスとして受け取ったgoogleやthis.mapを使用すれば、 // 通常通りvueでもJavaScriptAPIを利用できます。 // ↑ this.drawingManager = new this.google.maps.drawing.DrawingManager({ “markerOptions”: false, “drawingControl”: true, “drawingControlOptions”: { “drawingModes”: [ // 描画モードの指定 //this.google.maps.drawing.OverlayType.MARKER, // this.google.maps.drawing.OverlayType.POLYLINE, this.google.maps.drawing.OverlayType.RECTANGLE, //this.google.maps.drawing.OverlayType.CIRCLE, // this.google.maps.drawing.OverlayType.POLYGON ], “position”: this.google.maps.ControlPosition.TOP_RIGHT }, }); this.drawingManager.setMap(this.map); // googleMapイベント定義 const vm = this; this.google.maps.event.addListener(drawingManager, ‘rectanglecomplete’, function(rectangle){ if(vm.polygon){ vm.polygon.setMap(null); } drawingManager.setDrawingMode(null); vm.polygon = rectangle; vm.google.maps.event.addListener(rectangle, ‘click’, function(){ alert(“描画済み図形をクリックしました。”); }); }); }) .catch(e => { console.error(e); }); ・・・ }, methods: { ・・・ }, ・・・ </script>

DrawingManagerが作成されると、デフォルトのコントロールが表示されますね。今回は左上に表示しました。

staticmap4

 

次に描画すると、図形が地図上に表示されます。

staticmap4

 

描画済みの図形をクリックしてみましょう。アラートでメッセージが表示されることが確認できるはずです。

staticmap4

 

いかがでしょうか?描画済みの図形に対して、イベントを定義できると様々なことができますね。 描画済みの図形やマーカーに対して、どんな情報が見れたら便利だと思いますか?

 

 

みなさんも是非お試しください!!

 

 

バイ!

 

 

 

 

【Vuejs紹介シリーズ】

第1回目「Vueで地図を表示してみよう!!」

第2回目「VueでMaterial Design Iconを表示する方法」

第3回目「Vueで住所検索する方法」

第4回目「Vueでcsvファイルの取込結果を地図に表示してみる」

第6回目「Vuejs + Chartjsでグラフを表示する」

第7回目「Vuejs +OpenStreetMap表示」

 

 

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2018.04.26

Googleマップでマーカーの回転

みなさん、こんにちは。

Google マップでマーカーを描画するとき、回転したいなと思うことはありませんか?

例えば、車の走行履歴・・・

続きを読む

2018.06.28

新プランの Places API を調べてみました

みなさん、こんにちは。

新プラン Google Maps Platform の中で、 Places API の価格体系は、非常に細かく分類・・・

続きを読む

2017.03.05

Google マップにKMLファイルをロードする

みなさん、こんにちは。

今回は、Google Maps に KMLファイルをロードしてマーカー、ライン、ポリゴンを表示する方法を紹介します・・・

続きを読む

 - Google Maps JavaScript API, スタッフ日記