无法删除ui-gmap-google-map中的选定多边形

I am able to draw multiple polygon by using Google Draw manager. Now I am not able to select specific polygon from multiple polygon and delete and edit it. Also not able to get new array after edit or delete.

我可以使用Google Draw管理器绘制多个多边形。现在我无法从多个多边形中选择特定的多边形并删除和编辑它。编辑或删除后也无法获取新数组。

My demo.js code is as follows :

我的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);
    }

And My HTML code is as follows :

我的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>

You can find polygon image for reference:

您可以找到多边形图像以供参考：

Now I want to select one of polygon from following image and want to delete or update it.

现在我想从下面的图像中选择一个多边形，并想要删除或更新它。

Some help will be really appreciable.

一些帮助将是非常可观的。

2 个解决方案

#1

By the ui-google-map plugin's drawing manager doc, you could get the google.maps.drawing.DrawingManager object by the control attributes (putting there an object)

通过ui-google-map插件的绘图管理器文档，您可以通过控件属性获取google.maps.drawing.DrawingManager对象（放置一个对象）

<ui-gmap-drawing-manager control="drawingManagerControl" options="drawingManagerOptions"></ui-gmap-drawing-manager>

and

和

$scope.drawingManagerControl = {};
//Now get the drawingManager object
var drawingManager = $scope.drawingManagerControl.getDrawingManager();

Having this object is the main work. Now you can look on everything you need. For your case you need the overlaycomplete events, it will listen for every time you have drawn a shape (=> polygon , circle, polyline)

拥有这个对象是主要工作。现在，您可以查看所需的一切。对于您的情况，您需要overlaycomplete事件，它会在每次绘制形状时监听（=>多边形，圆形，折线）

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
  var newShape = e.overlay;
});

newShape is the new shape drawn, polygon in your case, so you can use it like a Polygon object and can use all you need in this reference.

newShape是您绘制的新形状多边形，因此您可以像Polygon对象一样使用它，并且可以在此引用中使用您需要的所有内容。

Now I want to select one of polygon from following image and want to delete or update it.

现在我想从下面的图像中选择一个多边形，并想要删除或更新它。

For it, we'll distinct the polygon selected, by assigning it in a global variable: eg var selectedShape;

对于它，我们将通过在全局变量中赋值来区分所选多边形：例如var selectedShape;

And now, Add a click event listener for this drawn polygon and update it as the selectedShape, and now to delete or update, you can use the selectedShape variable.

现在，为此绘制的多边形添加一个单击事件侦听器并将其更新为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;
    });
}); 

Finally you can delete the selected shape by setting his map to null selectedShape.setMap(null); and update the shape by setting it editable to true shape.setEditable(true);

最后，您可以通过将其地图设置为null selectedShape.setMap（null）来删除所选形状;并通过将其设置为true shape来更新形状.setEditable（true）;

And finally to make these click event possible you need to add clickable options to true for all shape. PS: Use the IsReady Service to have map ready before working on it

最后，为了使这些点击事件成为可能，您需要为所有形状添加可点击选项为true。 PS：使用IsReady服务准备好地图，然后再进行操作

Working plunker: https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/

工作人员：https：//embed.plnkr.co/qfjkT2lOu2vkATisGbw7/

Update:

更新：

But how to get all co-ordinates of multiple polygon after edit or draw.

但是如何在编辑或绘制后获得多个多边形的所有坐标。

you already have this in your script, in polygonecomplete ($scope.eventHandler). Now you can add it in overlaycomplete events listener, and for everytime you updated the shape (see code bellow)

你已经在你的脚本中使用了polygonecomplete（$ scope.eventHandler）。现在您可以将它添加到overlaycomplete事件监听器中，并且每次更新形状时（参见下面的代码）

But challenge is how to identify which polygon is edited on the map and how to update that specific polygon from my array

但挑战是如何识别在地图上编辑哪个多边形以及如何从我的数组更新该特定多边形

You can push in an array for each shape created and could manage it:

您可以为创建的每个形状推入一个数组，并可以对其进行管理：

 ...
 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);
}); 

in the delete function you can delete id by the index of the selectedShape

在删除功能中，您可以通过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);

}

}

Now you have the allShapes array, and in the end you can loop it then get for each coordinates and save in your db.

现在你有了allShapes数组，最后你可以循环它，然后获取每个坐标并保存在你的数据库中。

I updated the plunker and added some debug log do show you.

我更新了plunker并添加了一些调试日志给你看。

#2

This snipet from github could help: https://github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html

来自github的snipet可以提供帮助：https：//github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html