Question

我构建了一个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();
    ...

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

Answer 2

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

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

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

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

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

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

3 个答案: