Google 地图绘制多边形并删除前一个

Question

我正在尝试在用户选择多边形绘制按钮绘制新多边形时删除现有多边形。它必须用 drawingManager.setMap(null); 做一些事情，但我不能让它在我的代码中工作。我已经尝试了很多东西，但无法弄清楚。

信息：当页面加载时，绘图模式默认设置为多边形：drawingMode: google.maps.drawing.OverlayType.POLYGON

用户可以绘制一个多边形来标记一个区域。完成多边形后，DrawingMode 设置为 null：drawingManager.setDrawingMode(null); 并将坐标放入输入字段中，以便稍后通过表单将它们保存在数据库中。

有人可以帮帮我吗？到目前为止，这是我的代码：

var map;
var drawingManager;    

function initialize() {
var myLatlng = new google.maps.LatLng(51.51686166794058, 3.5945892333984375);
var mapOptions = {
    zoom: 9,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

//Getting map DOM element
var mapElement = document.getElementById('map_canvas');

map = new google.maps.Map(map_canvas, mapOptions);

drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },
    polygonOptions: {
        editable: true,
        draggable: true
    }
});

drawingManager.setMap(map);

// Add a listener for creating new shape event.
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    var newShape = event.overlay;
    newShape.type = event.type;
    if(drawingManager.getDrawingMode()) {
        drawingManager.setDrawingMode(null);
    }

});

// Add a listener for the "drag" event.
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
    overlayDragListener(event.overlay);
    $('#vertices').val(event.overlay.getPath().getArray());
});
}    

function overlayDragListener(overlay) {
google.maps.event.addListener(overlay.getPath(), 'set_at', function(event){
    $('#vertices').val(overlay.getPath().getArray());
});
google.maps.event.addListener(overlay.getPath(), 'insert_at', function(event){
    $('#vertices').val(overlay.getPath().getArray());
});
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

两件事：

添加全局数组（或变量）以允许访问形状
添加一个 drawingmode_changed 事件处理程序，当绘图模式更改回非空时，删除任何现有的多边形。

var shapes = [];

google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if (drawingManager.getDrawingMode() != null) {
      for (var i=0; i < shapes.length; i++) {
        shapes[i].setMap(null);
      }
      shapes = [];
    }
});

working fiddle

工作代码片段：

var map;
var drawingManager;
var shapes = [];

function initialize() {
  var myLatlng = new google.maps.LatLng(51.51686166794058, 3.5945892333984375);
  var mapOptions = {
    zoom: 9,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  //Getting map DOM element
  var mapElement = document.getElementById('map_canvas');

  map = new google.maps.Map(map_canvas, mapOptions);

  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },
    polygonOptions: {
      editable: true,
      draggable: true
    }
  });

  drawingManager.setMap(map);

  // Add a listener for creating new shape event.
  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    var newShape = event.overlay;
    newShape.type = event.type;
    shapes.push(newShape);
    if (drawingManager.getDrawingMode()) {
      drawingManager.setDrawingMode(null);
    }

  });

  // add a listener for the drawing mode change event, delete any existing polygons
  google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if (drawingManager.getDrawingMode() != null) {
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].setMap(null);
      }
      shapes = [];
    }
  });


  // Add a listener for the "drag" event.
  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    overlayDragListener(event.overlay);
    $('#vertices').val(event.overlay.getPath().getArray());
  });
}

function overlayDragListener(overlay) {
  google.maps.event.addListener(overlay.getPath(), 'set_at', function(event) {
    $('#vertices').val(overlay.getPath().getArray());
  });
  google.maps.event.addListener(overlay.getPath(), 'insert_at', function(event) {
    $('#vertices').val(overlay.getPath().getArray());
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Google 地图绘制多边形并删除前一个

Google Maps draw polygon and delete the previous one

google-maps