如何撤消谷歌地图绘图中最后添加的线答案

【问题标题】：How to undo last added line in google map drawing如何撤消谷歌地图绘图中最后添加的线
【发布时间】：2018-02-20 11:29:35
【问题描述】：

我的谷歌地图中有 2 个选项。
-->一个是多边形，另一个是画线。
现在我正在尝试在我的页面中执行撤消功能。当我点击undo按钮时，最近添加的线应该被删除（可能在任一多边形中选项或画线选项）。
有可能吗？

 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: ['polygon', 'polyline']
            },

            circleOptions: {
              strokeColor: '#00DB00',
              fillColor: 'green',
              fillOpacity: 0.05,
              strokeWeight: 5,
              clickable: false,
              editable: true,
              zIndex: 1
            }

          });
          drawingManager.setMap(map);
           google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event)
            {
              if (event.type === 'marker') console.log('Lat: ' + event.overlay.position.lat() + ', Long: ' + event.overlay.position.lng())
              else displayPolyLatLng(event.overlay.getPath().b); 
            });


          function displayPolyLatLng(pointArray)
          {debugger

              var result=" ";
              for (var i = 0; i < pointArray.length; i++) 
              {
                  result +='<b>Lat: ' + pointArray[i].lat() + ', Long: ' + pointArray[i].lng()+ '</b><br/>';
              }
              $('#info').html(result); 

              /*var lastEl = pointArray[pointArray.length-1];
              alert(lastEl)
              if(lastEl.length>1){
              undo_redo.push(lastEl.pop());
              } */    
          }
      }
      function removeLine(){
        polylines.remove(polylines.size() - 1)
      }

小提琴：https://jsfiddle.net/rc5p32nt/

【问题讨论】：

我认为这是不可能的。新的谷歌地图对用户不友好！！
是的，这是可能的。您必须编写代码来保留对最后添加的形状的引用。
@krish 有可能，如果您有兴趣，请参阅我的回答

标签： javascript jquery google-maps

【解决方案1】：

基本上是@geocodezip 所说的......

保留对添加的形状的引用：

var overlays = [];

然后您可以在overlaycomplete 事件中推送最新的覆盖对象event.overlay：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
   overlays.push(event.overlay); // store reference to added overlay
});

最后，点击撤消按钮通过setMap(null)隐藏覆盖：

// undo last overlay action
function removeLine() {
  var lastOverlay = overlays.pop();
  if (lastOverlay) lastOverlay.setMap(null);
}

请注意，这不会删除对象，只是将其隐藏在地图上不显示。如果您想完全删除覆盖，您还应该将其设置为 null。

您可以再次显示它们 - 如果您想添加一个重做按钮（在这种情况下，您不会像我所做的那样pop 他们）。请参阅https://developers.google.com/maps/documentation/javascript/examples/polyline-remove 了解如何实现此功能的示例。

更新的演示：https://jsfiddle.net/3fe6nfdr/

【讨论】：

谢谢。但是它完全删除了绘图，是否可以逐行删除？
@user7397787 你可以这样做developers.google.com/maps/documentation/javascript/examples/…

【解决方案2】：

我上面的答案解释了如何完全删除最近的覆盖。

但是，如果要删除最近绘制的折线线段，您可以在 overlaycomplete 事件对象中存储对形状对象的引用：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
   overlays.push(event); // store reference to added overlay
});

然后使用它判断添加的对象是否为折线，使用overlay.getpath()获取路径数组，最后调用其pop()函数删除最后一条线段：

// undo the last line segment of a polyline
function removeLineSegment() {

  var lastOverlay = overlays.length > 0 ? overlays[overlays.length - 1] : null;    

  if (lastOverlay && lastOverlay.type === "polyline") {
    var path = lastOverlay.overlay.getPath();
    path.pop(); // remove last line segment
  }
}

演示：https://jsfiddle.net/q9xxt4kt/

【讨论】：