Question

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

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

但答案仅显示圈子示例，其他形状

折线例如如何检索点将其存储在数组中以便在显示它时使用我有这个代码，它工作正常

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

问题是我试图通过添加这部分代码来检索Polyline的坐标：

            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不是函数（...）

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);
});

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

1 个答案: