Google Maps API v3從drawingManager保存並重復使用形狀

Question

我使用的是Google提供的Google Map API的示例之一。 在此示例中，我們可以使用繪圖庫在地圖上繪制一些線。

可以說我畫了一些東西。 那我怎么分享這個圖紙呢？ 或保存以供以后參考？

下面是代碼

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 11,
        // only show roadmap type of map, and disable ability to switch to other type
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    });

    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            google.maps.drawing.OverlayType.POLYGON, ],
            clickable: true,
            draggable: true
        },
        polygonOtions: {
            clickable: true,
            draggable: true
        }
    });

    drawingManager.setMap(map);
}

更新：

我正在嘗試Vadim的解決方案，但似乎有一個錯誤。 畫些東西然后刷新，您會看到

這是產生該錯誤的代碼：

<!DOCTYPE html>
<html>
    <head>

        <style>
            html, body {
                margin: 0;
                padding: 0;
                height:100%;
            }
            #map {
                height: 100%;
            }
            .btn {
                position:absolute;
                width:50px;
                height:60px;
                top:5%;
                left: 50%;
                z-index:9999;
                color:black;
            }
        </style>

        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry,places"></script>
    </head>
    <body>
        <div class="btn" onclick="clearall(map);">delete</div>
        <div id="map"></div>
        <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 4,
                // only show roadmap type of map, and disable ability to switch to other type
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            });

            map.data.setControls(['Polygon']);
            map.data.setStyle({
                editable: true,
                draggable: true
            });

            map.data.addListener('addfeature', savePolygon);
            map.data.addListener('removefeature', savePolygon);
            map.data.addListener('setgeometry', savePolygon);

            //load saved data
            loadPolygons(map);
        }

        function loadPolygons(map) {
            var data = JSON.parse(sessionStorage.getItem('geoData'));
            // map.data.forEach(function (f) {
            //     map.data.remove(f);
            // });
            map.data.addGeoJson(data)
        }

        function savePolygon() {
            map.data.toGeoJson(function (json) {
                // console.log(JSON.stringify(json));
                sessionStorage.setItem('geoData', JSON.stringify(json));
            });
        }
        function clearall(map){
            map.data.forEach(function (f) {
                map.data.remove(f);
            });
        }

        initMap();

        </script>

    </body>
</html>

Answer 1

為此，您可以利用Google Maps Data層。 以下示例演示了如何使用google.maps.Data類將多邊形作為GeoJSON數據導出和導入。 localStorage用於存儲GeoJSON數據。

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 4,
        // only show roadmap type of map, and disable ability to switch to other type
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    });

    map.data.setControls(['Polygon']);
    map.data.setStyle({
        editable: true,
        draggable: true
    });
    bindDataLayerListeners(map.data);

    //load saved data
    loadPolygons(map);
}


// Apply listeners to refresh the GeoJson display on a given data layer.
function bindDataLayerListeners(dataLayer) {
    dataLayer.addListener('addfeature', savePolygon);
    dataLayer.addListener('removefeature', savePolygon);
    dataLayer.addListener('setgeometry', savePolygon);
}

function loadPolygons(map) {
    var data = JSON.parse(localStorage.getItem('geoData'));
    map.data.forEach(function (f) {
        map.data.remove(f);
    });
    map.data.addGeoJson(data)
}



function savePolygon() {
    map.data.toGeoJson(function (json) {
        localStorage.setItem('geoData', JSON.stringify(json));
    });
}

演示版

更新資料

以下演示演示了如何刪除多邊形。

Answer 2

您可以使用overlaycomplete事件從繪制的多邊形中檢索路徑：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {

    // Get overlay paths
    var paths = event.overlay.getPaths(); 
});

可重新使用paths對象以從頭開始創建多邊形。 請參見下面的演示。 觸發overlaycomplete事件時，請從疊加層獲取路徑，並使用它創建一個新的多邊形。

JSFiddle演示

Google Maps API v3從drawingManager保存並重復使用形狀

問題描述

2 個解決方案

解決方案1
3 已采納 2015-09-24 19:46:20

解決方案2
1 2015-09-23 22:44:41

Google Maps API v3從drawingManager保存並重復使用形狀

問題描述

2 個解決方案

解決方案1 3 已采納 2015-09-24 19:46:20

解決方案2 1 2015-09-23 22:44:41

解決方案1
3 已采納 2015-09-24 19:46:20

解決方案2
1 2015-09-23 22:44:41