分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 使用ui-gmap-polygon侦听`set_at`事件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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)？@H_801_10@

我能够在angular-google-maps项目的源代码中找到对set_at的引用的唯一地方是在array-sync.coffee 文件中,但它看起来不像是暴露的.@H_801_10@

如果我不能直接使用指令监听set_at事件,我希望有一个事件在指令创建多边形时被触发,这样我就可以得到多边形的路径然后添加一个监听器,就像上面的代码.@H_801_10@

我已经将JSFiddle与基本结构以及事件对象放在一起.它当前处理多边形的mouSEOver和mouSEOut,但不处理set_at事件.@H_801_10@

解决方法

尝试使用以下方法.

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,function () {
                  console.log('set_at event');
              });
            })
          })
        })
      });
    }
  }
})