マルティスープ
Staff Blog

＜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>