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

Question

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

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

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

现在我想 select 下图中的多边形之一，并想删除或更新它。

一些帮助将非常可观。

Answer 1

通过 ui-google-map 插件的 drawing manager doc, you could get the 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();

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

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

newShape 是绘制的新形状，在您的例子中是多边形，因此您可以像 Polygon object 一样使用它，并且可以在本参考中使用您需要的所有内容。

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

为此，我们将通过在全局变量中分配它来区分所选的多边形：例如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); 来删除所选形状，并通过将其可编辑设置为 true 来更新形状 shape.setEditable(true);

最后，为了使这些点击事件成为可能，您需要将所有形状的可点击选项添加为 true。 PS：使用IsReady Service在处理地图之前准备好地图

正在工作的 plunker：https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/

更新：

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

您的脚本中已经有了这个，在 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

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

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

在删除函数中，您可以通过所选形状的索引删除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 并添加了一些调试日志给你看。

Answer 2

github 中的这段代码可能会有所帮助： https://github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html

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

Not able to delete selected polygon in ui-gmap-google-map

javascript

angularjs

google-maps

angular-ui-router

angular-google-maps