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

Question

我目前正在使用它DrawingManager来允许用户在地图上绘制形状.绘制一个形状后,我在多边形的路径上设置了一个监听器,这样我可以在路径改变后做出反应:

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

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

我能够set_at在angular-google-maps项目的源代码中找到引用的唯一地方是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');
              });
            })
          })
        })
      });
    }
  }
})

工作计划