如何保存地圖繪製狀態（多邊形，折線，標記，標記）

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> 

的問題是當我試圖通過增加這部分代碼以檢索折線的座標：

  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遺漏的類型錯誤：行[I] .getPath不是一個函數（...）

Answer 1

爲了retrive的折線

的COORDS假設你有一個像這樣

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爲獲得緯度，經度爲每個點或陣列發送到服務器，服務器端分裂和商店

尋找你的代碼，你應該添加新的對象來創建這樣

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