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 layer用于此目的。下面的示例演示了如何使用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));
    });
}

Demo

<强>更新

以下demo演示了如何删除多边形。

Answer 2

您可以使用overlaycomplete事件从绘制的多边形中检索路径：

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

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

可以重用paths对象从头开始创建多边形。请参阅以下演示。触发overlaycomplete事件后，从叠加层获取路径并使用它创建新的多边形。

JSFiddle demo

Google Maps API v3可以从drawingManager中保存和重用形状

2 个答案: