Odsłuchiwanie zdarzenia `set_at` przy użyciu interfejsu ui-gmap-polygon

Question

Używam obecnie DrawingManager, aby umożliwić użytkownikom rysowanie kształtów na mapie. Gdy kształt jest rysowany, skonfigurować słuchacza na ścieżce wielokąta więc mogę reagować po ścieżka została zmieniona:

var polygonPath = event.overlay.getPath(); 
google.maps.event.addListener(polygonPath, 'set_at', function() { 
    // my code... 
}); 

Działa to doskonale, gdy użytkownik dodaje nowy kształt za pomocą narzędzia do rysowania. Jeśli jednak mam już w bazie danych wielokątów, które wyświetlam z dyrektywą ui-gmap-polygon AngularJS (z projektu angular-google-maps), jak mogę odsłuchać zdarzenie set_at, ponieważ to zdarzenie nie jest na polygon, ale zamiast tego na wielokąta ścieżka (MVCArray)?

Jedyne miejsce, w którym udało mi się znaleźć odniesienie do set_at w kodzie źródłowym projektu angular-google-maps, znajdowało się w pliku array-sync.coffee, ale wygląda na to, że nie zostało ujawnione.

Jeśli nie można posłuchać zdarzenia set_at bezpośrednio za pomocą dyrektywy, mam nadzieję, że zdarzenie zostanie wywołane, gdy dyrektywa utworzy wielokąt, aby można było uzyskać ścieżkę wielokąta, a następnie dodać detektor do tak, jak powyższy kod.

Połączyłem ze sobą strukturę wraz z obiektem zdarzeń. Aktualnie obsługuje ruchy kursora i mouseout wielokąta, ale nie zdarzenie set_at.

Answer 1

Daj spróbować z poniższej podejścia.

directive('uiGmapPolygon', function ($timeout) { 
    return { 
    restrict: 'E', 
    link: function (scope, element, attrs) { 

     // Make sure that the polygon is rendered before accessing it. 
     // next two lines will do the trick. 
     $timeout(function() { 
     // I know that properties with $$ are not good to use, but can't get away without using $$childHead 
     scope.$$childHead.control.promise.then(function() { 
      // get the polygons 
      var polygons = scope.$$childHead.control.polygons; 
      // iterate over the polygons 
      polygons.forEach(function (polygon) { 
      // get google.maps.Polygon instance bound to the polygon 
      var gObject = polygon.gObject; 

      // get the Paths of the Polygon 
      var paths = gObject.getPaths(); 
      // register the events. 
      paths.forEach(function (path) { 
       google.maps.event.addListener(path, 'insert_at', function() { 
       console.log('insert_at event'); 
       }); 

       google.maps.event.addListener(path, 'remove_at', function() { 
        console.log('remove_at event'); 
       }); 

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

Working Plnkr

Answer 2

Musisz ustawić detektory zdarzeń na ścieżce (-ach) wielokąta.

Możesz użyć forEach() method z MVCArray, aby zidentyfikować każdą ścieżkę swojego wielokąta.

function initialize() { 

    var mapOptions = { 
     zoom: 4, 
     center: new google.maps.LatLng(40, 9), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

    var polygon = new google.maps.Polygon({ 
     editable: true, 
     strokeOpacity: 0, 
     strokeWeight: 0, 
     fillColor: '#00FF00', 
     fillOpacity: .6, 
     paths: [ 
     new google.maps.LatLng(39, 4), 
     new google.maps.LatLng(34, 24), 
     new google.maps.LatLng(43, 24), 
     new google.maps.LatLng(39, 4)], 
     map: map 
    }); 

    // Get paths from polygon and set event listeners for each path separately 
    polygon.getPaths().forEach(function (path, index) { 

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

     google.maps.event.addListener(path, 'remove_at', function() { 
      console.log('remove_at event'); 
     }); 

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

initialize(); 

JSFiddle demo