wydarzenie po modyfikacji wielokąta w mapach google api v3

Question

Zrobiłem aplikację mapującą, która używa menedżera rysunku (i implementuje wybieralne kształty); Program działa w następujący sposób: po zakończeniu rysowania wielokąta po kliknięciu przycisku na ścieżce jest odwzorowywany na wielokącie.

Kiedy wielokąt jest edytowany po tym procesie, chcę ponownie wywołać funkcję mapowania. Jednak nie mogę uzyskać tej części pracy;

Próbowałem użyć następującego kodu, ale zawsze pojawia się błąd, ponieważ nie ma jeszcze zaznaczonego kształtu, gdy ten słuchacz zostanie dodany. Co mogę zrobić?

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

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

ważne fragmenty kodu:

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

Rozwiązałem go nazywając .getPath() i wprowadzenie słuchacza wewnątrz słuchacza, która jest wywoływana za każdym razem kształt kliknięciu. Myślę, że dokumentacja google api nie jest zbyt jasna, jak używać set_at, więc może być użyteczne dla innych osób.

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

Powyższy kod działa dla mnie. Gdzie set_at jest wywoływane, gdy modyfikujemy obszar wielokąta z podświetlonej kropki (krawędzi) i insert_at jest wywoływane, gdy przeciągamy punkt pomiędzy podświetlonymi krawędziami. Użyłem ich w zdarzeniu polygoncomplete i po załadowaniu wielokąta z bazy danych. Dla nich dobrze działa

Answer 3

Aby uniknąć problemów wymienionych przy set_at i dragging, dodałem następujące, które wyłącza emisję zdarzeń dla set_at podczas przeciągania rysunku. Stworzyłem klasę, która rozszerza klasę wielokąta i dodał tą metodą:

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

}; 

to dodaje „coordinates_changed” zdarzenie do samej wielokąta, więc inny kod może tylko słuchać na miły, single, uproszczone Event-

Answer 4

chrismarx według twojego postu poniżej to przykład użycia nowego wydarzenia na maszynie. Dokonałem niewielkiej zmiany usuwania nadklasy i zmiany odniesień do "mnie", ponieważ wystąpił problem z niezdefiniowanym odniesieniem.

W górnej części pliku lub globalnego pliku konfiguracyjnego, etc użytku:

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

Następnie określić rozszerzenia:

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

    }; 

Wreszcie połączenia wewnętrznego i dodać słuchacza:

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

    });