如何保存地图绘制状态（多边形、折线、标记、标记）

Question

我知道这个问题可能会重复

How to save map drawing state (Polygon, Polyline, Markers)

但答案仅显示圆形示例，其他形状呢

Polyline 例如如何检索点将其存储在数组中以供下一步显示 我有这段代码，它工作正常

   <script>
     function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });

        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
            },
            markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' },
            circleOptions: {
                fillColor: '#ffff00',
                fillOpacity: 1,
                strokeWeight: 5,
                clickable: false,
                editable: true,
                zIndex: 1
            }
        });
        drawingManager.setMap(map);
        var circles = [];


        google.maps.event.addDomListener(drawingManager, 'circlecomplete', function (circle) {
            circles.push(circle);
        });

        google.maps.event.addDomListener(savebutton, 'click', function () {
            document.getElementById("savedata").value = "";
            for (var i = 0; i < circles.length; i++) {
                var circleCenter = circles[i].getCenter();
                var circleRadius = circles[i].getRadius();
                document.getElementById("savedata").value += "circle((";
                document.getElementById("savedata").value +=
                  circleCenter.lat().toFixed(3) + "," + circleCenter.lng().toFixed(3);
                document.getElementById("savedata").value += "), ";
                document.getElementById("savedata").value += circleRadius.toFixed(3) + ")\n";

            }
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>
 <script src="https://maps.googleapis.com/maps/api/js?key=MyKey&libraries=drawing&callback=initMap"
    async defer></script>

问题是当我尝试通过添加这部分代码来检索折线的坐标时：

            var Lines = [];
        google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function (polyline) {
            Lines.push(Lines);
        });

        google.maps.event.addDomListener(savebutton, 'click', function () {
            document.getElementById("savedata").value = "";
            for (var i = 0; i < Lines.length; i++) {
                document.getElementById("savedata").value += "Line((";
                document.getElementById("savedata").value +=
                 Lines[i].getPath().getArray().toString();
                document.getElementById("savedata").value += "),";
            }
        });

它给我错误 Line2.aspx:91 Uncaught TypeError: Lines[i].getPath is not a function(...)

Answer 1

用于检索折线的坐标

假设你有这样的一行

    var line = new google.maps.Polyline({
      path: linePath,
      geodesic: true,
      strokeColor: '#ff0000',
      strokeOpacity: 1,
      strokeWeight: 4,
      editable: true // if you dont want to see the editable point change it to false
    });

这样可以获取路径属性

  myPathArray =  line.getPath().getArray()

或者你可以这样显示内容

  alert(line.getPath().getArray().toString());

然后您可以检查 myPathArray 以获取每个点的 lat、lng 或将数组发送到服务器以进行服务器端拆分和存储

查看您的代码，您应该以这种方式添加新对象

google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function (polyline) {
        Lines.push(polyline);
});