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

【问题标题】：Is it possible to cancel a Google Maps API polyline while it's being drawn?是否可以在绘制 Google Maps API 折线时取消它？
【发布时间】：2013-08-27 12:02:54
【问题描述】：

我已经构建了一个 Google Maps API 工具集，允许用户在地图上绘制形状，为它们命名并记录区域。完成每个形状后，系统会提示他们为其命名并设置一些其他选项，例如是否在地图上显示标签。

我想让用户在放置点时（即在绘制点时）右键单击并取消折线（或多边形）。

根据我在文档中阅读的内容，我应该能够检测到用户右键单击了地图，但我不确定如何取消他们正在绘制的叠加层，因为它不会尚未提交到地图，这意味着我将无法将其称为对象。

有什么想法吗？

解决方案

感谢 Molle 博士的解决方案，如下：

    ...
    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();
    ...

【问题讨论】：

你的代码是什么样的？

标签： javascript google-maps google-maps-api-3

【解决方案1】：

虽然接受答案的代码有效，但它会引发错误，可能是由于未正确删除事件侦听器。

以下是更好的方法：

我使用变量cancelDrawingShape 来检测在绘制内容时是否按下了 Escape 按钮。如果cancelDrawingShape 设置为true，那么我将从地图中删除最后绘制的形状。

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

【讨论】：

【解决方案2】：

（假设您使用google.maps.drawing.DrawingManager）

当前的叠加层无法以任何方式访问。你可以做什么：

在rightclick 上，将DrawingManager-instance 的map-属性设置为null 并创建一个新的DrawingManager-instance。

这将删除当前编辑的叠加层（但不是已经完成的叠加层）

【讨论】：

你成功了！一个简单的实现并解决了我的问题。谢谢！

【解决方案3】：

对于 Angular 7，这对我有用。

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

【讨论】：