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

Question

我目前正在开发基于地图的Web应用程序.上一页矩形一个已经绘制(或多边形)应该被删除之前,我通过谷歌地图上绘制层工具绘制新的矩形.

Google地图上有" 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);
    }
});

2. 将矩形更改回RECTANGLE时删除矩形

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

更新小提琴

代码段:

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