angularjs - 使用 ui-gmap-polygon 监听 `set_at` 事件

Question

我目前正在使用 DrawingManager 来允许用户在 map 上绘制形状。绘制形状后，我在多边形的路径上设置一个监听器，以便我可以在路径更改后使用react:

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

当用户使用绘图工具添加新形状时，这非常有用。但是，如果我的数据库中已经有多边形，并且正在使用 ui-gmap-polygon AngularJS 指令(来自 angular-google-maps 项目)显示，那么如何才能我监听 set_at 事件，因为此事件不在 polygon 上，而是在多边形的路径 ( MVCArray ) 上？

我能够在 angular-google-maps 项目的源代码中找到对 set_at 的引用的唯一地方是 array-sync.coffee文件，但看起来并没有被暴露。

如果我无法直接使用指令监听 set_at 事件，我希望在指令创建多边形时触发一个事件，以便我可以获取多边形的路径然后添加一个监听器，就像上面的代码一样。

我整理了一个 JSFiddle 具有基本结构以及事件对象。它当前处理多边形的鼠标悬停和鼠标移出，但不处理 set_at 事件。

Answer 1

尝试以下方法。

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