在谷歌地图上开始绘制新形状时如何删除以前的形状

Question

我目前正在开发基于地图的 Web 应用程序。之前已经绘制的矩形（或多边形）应该删除，然后我通过在谷歌地图上绘制图层工具绘制新的矩形。

谷歌地图上有“overlaycomplete”事件，但如果我使用它，在绘制新矩形完成（鼠标向上）后，前一个矩形会被删除。但是，在绘制新矩形开始（鼠标按下）的过程之前，我需要删除以前的矩形。不能在地图上同时看到两个矩形！

感谢所有反馈！

这是 jsFiddle！ - http://jsfiddle.net/sean35/41Lrcq7L/30/

示例代码：

function initialize() {

var centerInfo = document.getElementById("mainForm:centerInfo").value;
var zoomInfo = document.getElementById("mainForm:zoomInfo").value;
centerInfo = centerInfo.split(",");

var mapOptions = {
    center : {
        lat : parseFloat(centerInfo[0]),
        lng : parseFloat(centerInfo[1])
    },
    zoom : parseInt(zoomInfo)
};
map = new google.maps.Map(document.getElementById('deviceControlMap'), mapOptions);

var drawingManager = new google.maps.drawing.DrawingManager({
    // drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControl : true,
    drawingControlOptions : {
        position : google.maps.ControlPosition.TOP_CENTER,
        drawingModes : [
        // google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.RECTANGLE ]
    },
    rectangleOptions : {
        strokeWeight : 1,
        clickable : true,
        editable : false,
        zIndex : 1
    }
});
drawingManager.setMap(map);

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
        if(rectangle != null)
            rectangle.setMap(null);
        closeDimSubWin();
        rectangle = event.overlay;
        var bounds = rectangle.getBounds();
        console.log(bounds);
    }
});

google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if(rectangle != null)
        rectangle.setMap(null);
});

// when the user clicks somewhere else on the map.
google.maps.event.addListener(map, 'click', function() {    
    if(rectangle != null)
        rectangle.setMap(null);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

编辑：我之前写过两个类似的问题。但是我删除了它们并用扩展信息写了这个问题。我希望这个问题是可以理解的。

Answer 1

一个选项：

1. 在 rectanglecomplete 上将绘图模式设置为 null

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
        if(rectangle != null)
            rectangle.setMap(null);
        rectangle = event.overlay;
        var bounds = rectangle.getBounds();
        console.log(bounds);
        drawingManager.setDrawingMode(null);
    }
});

1. 矩形变回RECTANGLE时将其删除

google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if ((drawingManager.getDrawingMode() == google.maps.drawing.OverlayType.RECTANGLE) && 
        (rectangle != null))
        rectangle.setMap(null);
});

updated fiddle

代码sn-p：

/*
 * declare map as a global variable
 */
var map;

var rectangle = null;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function() {

  var mapOptions = {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 4,
  };
  map = new google.maps.Map(document.getElementById('deviceControlMap'), mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    // drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        // google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    rectangleOptions: {
      strokeWeight: 1,
      clickable: true,
      editable: false,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
      if (rectangle != null)
        rectangle.setMap(null);
      rectangle = event.overlay;
      var bounds = rectangle.getBounds();
      console.log(bounds);
      drawingManager.setDrawingMode(null);
    }
  });

  google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if ((drawingManager.getDrawingMode() == google.maps.drawing.OverlayType.RECTANGLE) &&
      (rectangle != null))
      rectangle.setMap(null);
  });

  // when the user clicks somewhere else on the map.
  google.maps.event.addListener(map, 'click', function() {
    if (rectangle != null)
      rectangle.setMap(null);
  });
});

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="deviceControlMap" style="height: 400px;"></div>