javascript - How to undo last added line in google map drawing - Stack Overflow

admin管理员组

文章数量:1388225

I have 2 options in my google map.
-->one is polygon and another one is draw lines.
Now am trying to perform undo functionality in my page.When I click undo button recently added line should be removed(that may be in either polygon option or draw line option).
Is it possible?

 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, 'overlayplete', 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)
      }

fiddle: /

I have 2 options in my google map.
-->one is polygon and another one is draw lines.
Now am trying to perform undo functionality in my page.When I click undo button recently added line should be removed(that may be in either polygon option or draw line option).
Is it possible?

 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, 'overlayplete', 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)
      }

fiddle: https://jsfiddle/rc5p32nt/

• javascript
• jquery
• google-maps

Share Improve this question Follow asked Sep 12, 2017 at 6:01 user7397787user7397787 1,48088 gold badges2929 silver badges4343 bronze badges 3

• I think that is not possible.new google maps are not user friendly!! – krish Commented Sep 12, 2017 at 6:03
• 1 Yes it is possible. You have to write code to keep a reference to the last shape added. – geocodezip Commented Sep 12, 2017 at 6:23
• 1 @krish it's possible, see my answer below if you're interested – K Scandrett Commented Sep 12, 2017 at 9:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Basically what @geocodezip said...

Keep a reference to the shapes added:

var overlays = [];

You can then push the latest overlay object event.overlay in the overlayplete event:

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

Finally, on click of the Undo button hide the overlay via setMap(null):

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

Note that this doesn't remove the object, just hides it from showing on the map. If you want to remove the overlay pletely you should then also set it to null.

You can show them again - if you wanted to add a Redo button (in this case you wouldn't pop them as I have done). See https://developers.google./maps/documentation/javascript/examples/polyline-remove for an example of how to implement this.

Updated demo: https://jsfiddle/3fe6nfdr/

My above answer explains how to remove the most recent overlay entirely.

However to remove the most recently drawn line segment of a polyline you can store a reference to the shape object in the overlayplete event object:

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

Then using that determine if the object added was a polyline, grab the path array with overlay.getpath(), and finally call its pop() function to remove the last line segment:

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

Demo: https://jsfiddle/q9xxt4kt/

本文标签： javascriptHow to undo last added line in google map drawingStack Overflow