Question

我目前正在使用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）？

我能够在set_at项目的源代码中找到angular-google-maps的引用的唯一位置在array-sync.coffee文件中，但它看起来不像是set_at暴露。

如果我不能直接使用指令监听set_at事件，我希望当指令创建多边形时会触发一个事件，这样我就可以得到多边形的路径，然后添加一个听众，就像上面的代码一样。

我已经将 JSFiddle 与基本结构以及events对象组合在一起。它当前处理多边形的鼠标悬停和鼠标输出，但不处理{{1}}事件。

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

Answer 2

您需要在多边形路径上设置事件侦听器。

您可以使用forEach() method的MVCArray来识别多边形的每个路径。

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

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

2 个答案: