Google maps 谷歌地图绘制多边形并删除上一个多边形

Google maps 谷歌地图绘制多边形并删除上一个多边形,google-maps,Google Maps,当用户选择“多边形绘制”按钮绘制新多边形时,我尝试删除现有多边形。 它必须与drawingManager.setMap(null)相关但我无法在我的代码中使用它。我试过很多东西,但都想不出来 信息: 加载页面时,默认情况下,drawingmode设置为polygon:drawingmode:google.maps.drawing.OverlyType.polygon 用户可以绘制多边形来标记区域。多边形完成后,DrawingMode设置为null:drawingManager.setDrawin

当用户选择“多边形绘制”按钮绘制新多边形时,我尝试删除现有多边形。 它必须与
drawingManager.setMap(null)相关但我无法在我的代码中使用它。我试过很多东西,但都想不出来

信息: 加载页面时,默认情况下,drawingmode设置为polygon:
drawingmode:google.maps.drawing.OverlyType.polygon

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

谁能帮帮我吗?以下是我目前的代码:

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);
两件事:

  • 添加全局数组(或变量)以允许访问形状
  • 添加
    drawingmode\u 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 = [];
        }
    });