当用户选择多边形绘制按钮以绘制新多边形时,我正在尝试删除现有多边形。
它必须与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);
答案 0 :(得分:10)
两件事:
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 = [];
}
});
工作代码段:
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;