Google지도에서 다각형을 그리고 이전 하나를 삭제합니다.

Question

사용자가 새 다각형 그리기 버튼을 선택할 때 기존 다각형을 제거하려고합니다. drawingManager.setMap(null);으로 뭔가를해야하지만 내 코드에서 제대로 작동하지 않습니다. 나는 많은 것을 시도했지만 그것을 이해할 수 없습니다.

정보 : 페이지가 drawingmode은 기본적으로 다각형으로 설정로드 : drawingMode: google.maps.drawing.OverlayType.POLYGON

사용자는 영역을 표시하는 다각형을 그릴 수 있습니다. 다각형이 완료되면 DrawingMode는 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

두 가지 :

1. 이 모양
2. 에 액세스 할 수는 drawingmode_changed 이벤트 처리기를 추가 할 수 있도록 글로벌 배열 (또는 변수)를 추가 할 때 그리기 모드 null가 아닌 것으로 다시 변경되면 기존 다각형을 제거하십시오.

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"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>