evento dopo la modifica del poligono in google maps api v3

Question

Ho creato un'applicazione di mappatura che utilizza il gestore di disegno (e implementa forme selezionabili); Il programma funziona come segue: al termine del disegno del poligono dopo aver fatto clic su un pulsante un tracciato, viene mappato sul poligono.

Quando il poligono viene modificato dopo questo processo, desidero richiamare la funzione di mappatura. Tuttavia non riesco a far funzionare questo pezzo;

Ho provato a utilizzare il seguente codice, ma ottengo sempre un errore perché non è ancora selezionata alcuna forma quando questo listener viene aggiunto. Cosa posso fare?

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

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

importanti pezzi di codice:

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

ho risolto chiamando .getPath() e mettendo l'ascoltatore dentro l'ascoltatore che viene chiamata ogni volta una forma viene cliccato. Penso che la documentazione di google api non sia molto chiara su come usare set_at, quindi potrebbe essere utile anche per altre persone.

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

Il codice di cui sopra sta lavorando per me. Dove viene emesso set_at quando si modifica l'area del poligono da un punto evidenziato (bordi) e insert_at viene attivato quando si trascina il punto tra i bordi evidenziati. Li ho usati nell'evento polygoncomplete e dopo aver caricato il poligono dal database. Funzionando bene per loro

Answer 3

Per evitare i problemi menzionati con set_at e trascinamento, ho aggiunto quanto segue, che disabilita la trasmissione di eventi per set_at quando il disegno viene trascinato. Ho creato una classe che estende la classe poligono, e ha aggiunto di questo metodo:

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

}; 

ha aggiunto un evento "coordinates_changed" al poligono stesso, in modo altro codice può solo ascoltare per una bella, sola, semplificato event-

Answer 4

chrismarx secondo il tuo post qui sotto è un esempio di utilizzo del nuovo evento su dattiloscritto. Ho apportato piccole modifiche alla rimozione della superclasse e alla modifica dei riferimenti a "me" perché c'era un problema con riferimento non definito.

Nella parte superiore del file o il file di configurazione globale, uso ecc:

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

quindi definire l'estensione:

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

    }; 

Infine chiamano estensione e aggiungere ascoltatore:

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

    });