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

时间:2015-01-23 13:16:25

标签: google-maps

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

的信息: 页面加载时,默认情况下,drawingmode设置为polygon:drawingMode: google.maps.drawing.OverlayType.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);

1 个答案:

答案 0 :(得分:10)

两件事:

  1. 添加全局数组(或变量)以允许访问形状
  2. 添加drawingmode_changed事件处理程序,当绘图模式更改回非null时,删除所有现有多边形。
  3. 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

    工作代码段:

    &#13;
    &#13;
    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);
    &#13;
    html,
    body,
    #map_canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    &#13;
    <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <div id="map_canvas" style="border: 2px solid #3872ac;"></div>
    &#13;
    &#13;
    &#13;