是否可以在绘制时取消 Google Maps API 折线？

Question

I've built a Google Maps API toolset that allows the user to draw shapes over the map, give them names and record areas. On the completion of each shape, they are prompted to give it a name and set a few other options such as whether or not to show a label on the map.

I'd like to give the user the option to right click and cancel a polyline (or polygon) whilst placing the points, ie while they're drawing it.

Based on what I've read in the documentation, I should be able to detect that the user right clicked on the map, but I'm not sure how to cancel the overlay they were drawing, as it won't have been committed to the map yet, which means I won't be able to refer to it as an object.

Any ideas?

Solution

Thanks to Dr Molle for the solution, which was as follows:

    ...
    google.maps.event.addListener(_map, "rightclick", function(){
        InitialiseDrawingManager();
    });
}

function InitialiseDrawingManager(){
    if (_drawingManager != null)
        _drawingManager.setMap(null);

    _drawingManager = new google.maps.drawing.DrawingManager();
    _drawingManager.setMap(_map);

    UpdateOverlaySettings();
    ...

Answer 1

While the code for the accepted answer works, it throws an error, probably due to event listeners not being removed properly.

The following is a better approach:

I used a variable cancelDrawingShape to detect if the Escape button has been pressed while stuff is being drawn. If the cancelDrawingShape is set to true , then I will remove the last drawn shape from the map.

var cancelDrawingShape = false;

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
    var lastDrawnShape = e.overlay;
    if (cancelDrawingShape) {
        cancelDrawingShape = false;
        lastDrawnShape.setMap(null); // Remove drawn but unwanted shape
        return;
    }

    // Else, do other stuff with lastDrawnShape
});

$(document).keydown(function (event) {
    if (event.keyCode === 27) { // Escape key pressed
        cancelDrawingShape = true;
        drawingManager.setDrawingMode(null); // To terminate the drawing, will result in autoclosing of the shape being drawn.
    }
});

Answer 2

(Assuming you use the google.maps.drawing.DrawingManager )

The current overlay is not accessible in any manner. What you can do:

On rightclick set the map -property of the DrawingManager -instance to null and create a new DrawingManager -instance.

This will remove the currently edited overlay(but not the already finished overlays)

Answer 3

For Angular 7, This worked for me.

cancelDrawingShape: boolean = false; // declaration of variable
    @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
        if (event.key === "Escape" || event.key === "Esc") {
          this.cancelDrawingShape = true;
          this.drawingManager.setDrawingMode(null); // To terminate the drawing, will result in autoclosing of the shape being drawn.
        }
      }

        google.maps.event.addListener(this.drawingManager,"polygoncomplete",
          polygon => {
            if(this.cancelDrawingShape){
              this.selectedShape = polygon;
              this.deleteSelectedShape();
              this.cancelDrawingShape = false;
              return false;
            }else{
               // else part
    }});