javascript - puntos - No se puede eliminar el polígono seleccionado en ui-gmap-google-map

marcar puntos en google maps api

Question

Puedo dibujar múltiples polígonos usando Google Draw manager. Ahora no puedo seleccionar un polígono específico de un polígono múltiple y eliminarlo y editarlo. Además, no puede obtener una nueva matriz después de editar o eliminar.

Mi código demo.js es el siguiente:

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

Y mi código HTML es el siguiente:

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

Puede encontrar imágenes poligonales para referencia:

Ahora quiero seleccionar uno de los polígonos de la imagen siguiente y quiero eliminarlos o actualizarlos.

Alguna ayuda será realmente apreciable.

Answer 1

Este snipet de github podría ayudar: https://github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html

Answer 2

Por el doc del gestor de dibujos del plugin ui-google-map, puedes obtener el objeto google.maps.drawing.DrawingManager por los atributos de control (colocando allí un objeto)

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

y

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

Tener este objeto es el trabajo principal. Ahora puedes mirar todo lo que necesitas. Para su caso necesita los eventos de superposición completa , escuchará cada vez que haya dibujado una forma (=> polígono, círculo, polilínea)

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

newShape es el nuevo polígono dibujado con forma en su caja, por lo que puede usarlo como un objeto Polígono y puede usar todo lo que necesita en esta referencia.

Ahora quiero seleccionar uno de los polígonos de la imagen siguiente y quiero eliminarlos o actualizarlos.

Para ello, distinguiremos el polígono seleccionado, asignándolo en una variable global: por ejemplo var selectedShape;

Y ahora, agregue un detector de eventos de clic para este polígono dibujado y actualícelo como la forma seleccionada, y ahora para eliminar o actualizar, puede usar la variable selectedShape.

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

Finalmente puede eliminar la forma seleccionada configurando su mapa como nulo selectedShape.setMap(null); y actualice la forma estableciendo su editable en true shape.setEditable(true);

Y finalmente, para hacer posible este evento de clic, debe agregar opciones clicables a verdadero para todas las formas. PD: use el servicio IsReady para tener el mapa listo antes de trabajar en él

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

Actualizar:

Pero cómo obtener todas las coordenadas de un polígono múltiple después de editar o dibujar.

ya tienes esto en tu script, en polygonecomplete ($ scope.eventHandler). Ahora puede agregarlo en el oyente de eventos de overlaycomplete, y para cada vez que actualice la forma (vea el código a continuación)

Pero el reto es cómo identificar qué polígono se edita en el mapa y cómo actualizar ese polígono específico de mi matriz

Puede insertar una matriz para cada forma creada y podría administrarla:

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

en la función de eliminación, puede eliminar el id por el índice de selectedShape

//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);

}

Ahora tiene la matriz allShapes y, al final, puede recorrerlo en bucle, obtener para cada una de las coordenadas y guardar en su base de datos.

Actualicé el plunker y agregué un registro de depuración que te mostraba.