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

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, but is instead, on the polygon's path (MVCArray)?

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

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

我已经将 JSFiddle 与基本结构以及事件对象放在一起。它当前处理多边形的鼠标悬停和鼠标移出，但不处理 set_at 事件。

Answer 1

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

您可以使用 forEach() method of the 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

Answer 2

试试下面的方法。

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

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

Listening to `set_at` event using the ui-gmap-polygon

google-maps

google-maps-api-3

angularjs

angular-ui

angular-google-maps