evento después de modificar el polígono en google maps api v3

Question

Hice una aplicación de asignación que utiliza el administrador de dibujos (e implementa formas seleccionables); El programa funciona de la siguiente manera: cuando se termina de dibujar el polígono después de hacer clic en un botón, se mapea una ruta en el polígono.

Cuando el polígono se edita después de este proceso, quiero que se vuelva a llamar a la función de mapeo. Sin embargo, no puedo hacer que esta pieza funcione;

Intenté utilizar el siguiente código pero siempre recibo un error porque aún no se ha seleccionado ninguna forma cuando se agrega esta escucha. ¿Que puedo hacer?

google.maps.event.addListener(selectedShape, 'set_at', function() { 
    console.log("test"); 
}); 

google.maps.event.addListener(selectedShape, 'insert_at', function() { 
    console.log("test"); 
}); 

importantes piezas de código:

function showDrawingManager(){ 
    var managerOptions = { 
     drawingControl: true, 
     drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: [google.maps.drawing.OverlayType.MARKER,google.maps.drawing.OverlayType.POLYLINE,google.maps.drawing.OverlayType.POLYGON] 
     }, 
     markerOptions: { 
      editable: true, 
      icon : '/largeTDGreenIcons/blank.png' 
     }, 
     polygonOptions: { 
      fillColor:"#1E90FF", 
      strokeColor:"#1E90FF", 
     }, 
     polylineOptions: { 
      strokeColor:"#FF273A" 
     } 
    } 

    var drawingManager = new google.maps.drawing.DrawingManager(managerOptions); 
    drawingManager.setMap(map); 
    return drawingManager; 
} 

    function clearSelection() { 
     if (selectedShape) { 
      console.log("clearSelection"); 

      selectedShape.setEditable(false); 
      selectedShape = null; 
      numberOfShapes--; 
     } 
} 

function setSelection(shape) { 
     console.log("setSelection"); 

    clearSelection(); 
    selectedShape = shape; 
    shape.setEditable(true); 
     numberOfShapes++; 
     //getInformation(shape); 
} 

function initialize(){ 
//.... 
var drawingManager = showDrawingManager(); 
     google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
      if (e.type != google.maps.drawing.OverlayType.MARKER) { 
      // Switch back to non-drawing mode after drawing a shape. 
      drawingManager.setDrawingMode(null); 

      // Add an event listener that selects the newly-drawn shape when the user 
      // mouses down on it. 
      var newShape = e.overlay; 
      newShape.type = e.type; 
      google.maps.event.addListener(newShape, 'click', function() { 
       setSelection(newShape); 
      }); 
      setSelection(newShape); 
      } 
     }); 

Answer 1

me lo resolvieron llamando .getPath() y poner al oyente en el interior del oyente que se llama cada vez que se hace clic en una forma. Creo que la documentación de google api no es muy clara sobre cómo usar el set_at, por lo que puede ser útil para otras personas también.

// Add an event listener that selects the newly-drawn shape when the user 
    // mouses down on it. 
    var newShape = e.overlay; 
    newShape.type = e.type; 
    google.maps.event.addListener(newShape, 'click', function() { 
     google.maps.event.addListener(newShape.getPath(), 'set_at', function() { 
      console.log("test"); 
     }); 

     google.maps.event.addListener(newShape.getPath(), 'insert_at', function() { 
      console.log("test"); 
     }); 
     setSelection(newShape); 
    }); 

Answer 2

google.maps.event.addListener(yourPolygon.getPath(), 'insert_at', function(index, obj) { 
      //polygon object: yourPolygon 
    }); 
    google.maps.event.addListener(yourPolygon.getPath(), 'set_at', function(index, obj) { 
      //polygon object: yourPolygon 
    }); 

El código anterior está trabajando para mí. Donde set_at se dispara cuando modificamos el área del polígono desde un punto resaltado (bordes) y insert_at se dispara cuando arrastramos el punto que está entre los bordes resaltados. Los usé en el evento polygoncomplete y después de cargar el polígono desde la base de datos. Funciona bien para ellos

Answer 3

Para evitar los problemas mencionados con set_at y arrastrando, agregué lo siguiente, que deshabilita la transmisión de eventos para set_at cuando se arrastra el dibujo. He creado una clase que amplíe la clase polígono, y añadió que este método:

ExtDrawingPolygon.prototype.enableCoordinatesChangedEvent = function(){ 
    var me = this, 
     superClass = me.superClass, 
     isBeingDragged = false, 
     triggerCoordinatesChanged = function(){ 
     //broadcast normalized event 
     google.maps.event.trigger(superClass,'coordinates_changed'); 
     }; 

    //if the overlay is being dragged, set_at gets called repeatedly, so either we can debounce that or igore while dragging, ignoring is more efficient 
    google.maps.event.addListener(superClass,'dragstart',function(){ 
    isBeingDragged = true; 
    }); 

    //if the overlay is dragged 
    google.maps.event.addListener(superClass,'dragend',function(){ 
    triggerCoordinatesChanged(); 
    isBeingDragged = false; 
    }); 

    //or vertices are added to any of the possible paths, or deleted 
    var paths = superClass.getPaths(); 
    paths.forEach(function(path,i){ 
    google.maps.event.addListener(path,"insert_at",function(){ 
     triggerCoordinatesChanged(); 
    }); 
    google.maps.event.addListener(path,"set_at",function(){ 
     if(!isBeingDragged){ 
     triggerCoordinatesChanged(); 
     } 
    }); 
    google.maps.event.addListener(path,"remove_at",function(){ 
     triggerCoordinatesChanged(); 
    }); 
    }); 

}; 

Se añadió un evento "coordinates_changed" al propio polígono, por lo que otro código sólo puede escuchar un agradable, sencillo, simplificado por eventos

Answer 4

chrismarx de acuerdo con su publicación a continuación es un ejemplo del uso de un nuevo evento en mecanografiado. He hecho pequeños cambios para eliminar la superclase y cambiar las referencias a "mí" porque había un problema con la referencia no definida.

En la parte superior de su archivo o archivo de configuración global, el uso etc:

declare global { 
    module google.maps { 
     interface Polygon { 
      enableCoordinatesChangedEvent(); 
     } 
    } 
} 

a continuación, definir la extensión:

google.maps.Polygon.prototype.enableCoordinatesChangedEvent = function() { 
      var me = this, 
      isBeingDragged = false, 
      triggerCoordinatesChanged = function() { 
       //broadcast normalized event 
       google.maps.event.trigger(me, 'coordinates_changed'); 
      }; 

     //if the overlay is being dragged, set_at gets called repeatedly, so either we can debounce that or igore while dragging, ignoring is more efficient 
     google.maps.event.addListener(me, 'dragstart', function() { 
      isBeingDragged = true; 
     }); 

     //if the overlay is dragged 
     google.maps.event.addListener(me, 'dragend', function() { 
      triggerCoordinatesChanged(); 
      isBeingDragged = false; 
     }); 

     //or vertices are added to any of the possible paths, or deleted 
     var paths = me.getPaths(); 
     paths.forEach(function (path, i) { 
      google.maps.event.addListener(path, "insert_at", function() { 
       triggerCoordinatesChanged(); 
      }); 
      google.maps.event.addListener(path, "set_at", function() { 
       if (!isBeingDragged) { 
        triggerCoordinatesChanged(); 
       } 
      }); 
      google.maps.event.addListener(path, "remove_at", function() { 
       triggerCoordinatesChanged(); 
      }); 
     }); 

    }; 

llaman Finalmente extensión y añadir oyente:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) { 
     event.overlay.enableCoordinatesChangedEvent(); 

     google.maps.event.addListener(event.overlay, 'coordinates_changed', function (index, obj) { 
      //polygon object: yourPolygon 
      console.log('coordinates_changed'); 
     }); 

    });