google-maps - 在 Google map 上开始绘制新形状时如何删除先前的形状

Question

我目前正在开发一个基于 map 的 Web 应用程序。在我通过 Google map 上的绘图图层工具绘制新矩形之前，应删除先前已绘制的矩形(或多边形)。

Google map 上有“overlaycomplete”事件，但如果我使用它，则在绘制新矩形完成(鼠标向上)后，先前的矩形将被删除。但是，我需要在绘制新矩形开始(鼠标按下)之前删除以前的矩形。 map 上不应该同时看到两个矩形!

感谢所有反馈!

这是 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. 在矩形完成时将绘图模式设置为空

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

当矩形变回RECTANGLE时将其删除

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

updated fiddle

代码片段:

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