无法删除用户界面中选定的多边形
我可以使用Google Draw管理器绘制多个多边形。 现在我无法从多边形中选择特定的多边形并删除和编辑它。 编辑或删除后也无法获得新阵列。
我的demo.js代码如下：
$scope.map = {
center: { latitude: 19.997454, longitude: 73.789803 },
zoom: 10,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
//radius: 15000,
stroke: {
color: '#08B21F',
weight: 2,
opacity: 1
},
fill: {
color: '#08B21F',
opacity: 0.5
},
geodesic: true, // optional: defaults to false
draggable: false, // optional: defaults to false
clickable: false, // optional: defaults to true
editable: false, // optional: defaults to false
visible: true, // optional: defaults to true
control: {},
refresh: "refreshMap",
options: { scrollwheel: true },
Polygon: {
visible: true,
editable: true,
draggable: true,
geodesic: true,
stroke: {
weight: 3,
color: 'red'
}
},
source: {
id: 'source',
coords: {
'latitude': 19.9989551,
'longitude': 73.75095599999997
},
options: {
draggable: false,
icon: 'assets/img/person.png'
}
},
isDrawingModeEnabled: true
};
$scope.drawingManagerOptions = {
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
]
},
circleOptions: {
fillColor: '#BCDCF9',
fillOpacity:0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
},
polygonOptions: {
fillColor: '#BCDCF9',
strokeColor: '#57ACF9',
fillOpacity: 0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
}
};
var coords = [];
var polygon;
$scope.eventHandler = {
polygoncomplete: function (drawingManager, eventName, scope, args) {
polygon = args[0];
var path = polygon.getPath();
for (var i = 0 ; i < path.length ; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
},
};
$scope.removeShape = function () {
google.maps.event.clearListeners(polygon, 'click');
google.maps.event.clearListeners(polygon, 'drag_handler_name');
polygon.setMap(null);
}
而我的HTML代码如下所示：
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control">
<ui-gmap-marker coords="map.source.coords"
options="map.source.options"
idkey="map.source.id">
</ui-gmap-marker>
<ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" events="eventHandler"></ui-gmap-drawing-manager>
</ui-gmap-google-map>
你可以找到多边形图像以供参考：
现在我想从下面的图像中选择一个多边形，并想删除或更新它。 
一些帮助将非常可观。
通过ui-google-map插件的绘图管理器文档，您可以通过控件属性获取google.maps.drawing.DrawingManager对象（放置一个对象）
<ui-gmap-drawing-manager control="drawingManagerControl" options="drawingManagerOptions"></ui-gmap-drawing-manager>
和
$scope.drawingManagerControl = {};
//Now get the drawingManager object
var drawingManager = $scope.drawingManagerControl.getDrawingManager();
有这个对象是主要工作。 现在你可以看看你需要的一切。 对于你的情况，你需要覆盖完整的事件，它会听你每次绘制一个形状（=>多边形，圆形，折线）
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
});
newShape是您绘制的新形状，多边形，因此您可以像使用Polygon对象那样使用它，并且可以在此参考中使用所需的全部内容。
现在我想从下面的图像中选择一个多边形，并想删除或更新它。
为此，我们将通过将其分配给全局变量来区分所选的多边形：例如， var selectedShape;
现在，为这个绘制的多边形添加一个点击事件侦听器并将其更新为selectedShape，现在要删除或更新，可以使用selectedShape变量。
var selectedShape;
... ...
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
});
最后，您可以通过将其地图设置为null selectedShape.setMap(null);来删除选定的形状selectedShape.setMap(null); 并通过将形状设置为可编辑来更新形状shape.setEditable(true);
最后，为了使这些点击事件成为可能，您需要为所有形状添加可点击的选项。 PS：在使用之前，使用IsReady服务准备好地图
工作plunker：https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/
更新：
但是如何在编辑或绘制之后获取多边形的所有坐标。
你已经在你的脚本中使用polygonecomplete（$ scope.eventHandler）。 现在，您可以将其添加到overlaycomplete事件侦听器中，并且每次更新形状时（请参阅下面的代码）
但挑战在于如何确定在地图上编辑哪个多边形以及如何从数组中更新该特定多边形
您可以为每个创建的形状推送一个数组，并可以对其进行管理：
...
var allShapes = []; //the array contains all shape, to save in end
....
//get path coords: I use your code there
function getShapeCoords(shape) {
var path = shape.getPath();
var coords = [];
for (var i = 0; i < path.length; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
return coords;
}
....
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
...
// get coordinate of the polygon
var shapeCoords = getShapeCoords(newShape);
// pushing this shape to allShapes array
allShapes.push(newShape);
});
在删除功能中，您可以通过selectedShape的索引删除id
//delete selected shape
function deleteSelectedShape() {
if (!selectedShape) {
alert("There are no shape selected");
return;
}
var index = allShapes.indexOf(selectedShape);
allShapes.splice(index, 1);
selectedShape.setMap(null);
}
现在你有了allShapes数组，最后你可以循环它，然后获取每个坐标并保存在数据库中。
我更新了plunker并添加了一些调试日志。
这从github snipet可以帮助：https：//github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html
链接地址: http://www.djcxy.com/p/96495.html