googlemaps で drawingManager を使ってポリゴンを作成してみる

2022年5月3日

drawingManager を使って googlemap の上にポリゴンを書くサンプル書き残しておこうと思います。

挙動

コード

vue を使用しています。

<template>
    <div>
        <div class="map-container">
            <div class="map-wrapper">
                <div id="map" class="map"></div>
            </div>
        </div>
        <div id="function-container" class="function-container">
            <div class="function-wrapper">
                <div class="function">
                    <div><button @click="createPolygons()">ポリゴン作成</button></div>
                    <div><button @click="deletePolygons()">ポリゴン削除</button></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                map: null,
                drawingManager: null,
                polygons: [],
                currentLat: 35.6807944,
                currentLng: 139.7670774,
            }
        },
        mounted (){
            this.initMap();
        },
        methods: {
            initMap: async function () {
                let timer = setInterval(() => {
                    if(window.google){
                        clearInterval(timer);
                        // マップを描画する。
                        this.map = new window.google.maps.Map(document.getElementById("map"), {
                            gestureHandling: 'greedy',
                            mapTypeControl: false,
                            zoomControl: false,
                            streetViewControl: false,
                            center: {lat: this.currentLat, lng: this.currentLng},
                            zoom: 12,
                            clickableIcons: false,
                            fullscreenControl: false,
                        });
                        this.drawingManager = new google.maps.drawing.DrawingManager({
                            drawingMode: null, // 描画のタイプ(最初からポリゴン描画のタイプを指定するなら次の通り「google.maps.drawing.OverlayType.POLYGON」)
                            drawingControl: false, // 描画ツールボックス表示の可否
                            map: this.map, // 描画する地図
                            polygonOptions: {
                                strokeColor: '#FF0000', // ライン色(#RRGGBB形式)
                                strokeOpacity: 0.8, // ライン透明度 0.0～1.0(デフォルト)
                                strokeWeight: 2, // ライン太さ(単位ピクセル)
                                fillColor: '#FF0000', // ポリゴン領域色(#RRGGBB形式)
                                fillOpacity: 0.35, // ポリゴン領域透明度 0.0～1.0(デフォルト)
                                draggable: false, // ポリゴン描画後の移動の可否
                                editable: false, // ポリゴン描画後の変形の可否
                            },
                        });
                        // ポリゴン描画終了時のイベントを設定
                        google.maps.event.addListener(this.drawingManager, "polygoncomplete", this.onPolygonComplete)
                    }
                }, 500)
            },
            onPolygonComplete: function (polygon){
                this.polygons.push(polygon)
                if (window.confirm("ポリゴンの作成を続けますか？")) {
                } else {
                    this.drawingManager.setDrawingMode(null) // 描画モードを終了
                }
            },
            createPolygons: function() {
                this.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON) // 描画モードを開始
            },
            deletePolygons: function() {
                this.polygons.forEach((polygon) => {
                    polygon.setMap(null) // ポリゴン削除
                    this.drawingManager.setDrawingMode(null) // 描画モードを終了
                })
            }
        }
    }
</script>

2022年5月3日