6

我目前正在使用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直接使用指令收听事件，我希望在指令创建多边形时触发一个事件，这样我就可以获取多边形的路径，然后添加一个监听器，就像上面的代码。

我已经将 aJSFiddle与基本结构以及事件对象放在一起。它当前处理多边形的 mouseover 和 mouseout，但不处理set_at事件。

4

2 回答 2

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');
              });
            })
          })
        })
      });
    }
  }
})

工作计划

于 2015-03-24T13:39:55.050 回答
1

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

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

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

于 2015-03-23T08:21:48.493 回答