javascript - 对于 Angular 谷歌地图，我希望我的范围函数在多边形绘制完成后调用

Question

对于 Angular 谷歌地图，我希望在多边形绘制完成后调用我的范围函数。

绘制多边形后，我需要调用名为 scope.polygonDrawn() 的指令作用域函数并让其知道绘制的点吗？

我正在使用带有 javascript 和 html 的 Angular 版本 1。下面的当前代码在一个指令中，适用于基本 map 和绘制多边形，但我可以获得发送到我的方法的多边形数据点。

这是我当前的代码:

 <ui-gmap-google-map center="config.map.center" zoom="config.map.zoom" options="config.map.options" events="config.map.events" draggable="true">

        <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="true" visible="polygonConfig.visible" editable="polygonConfig.editable" draggable="polygonConfig.draggable" clickable="true" events="polygonConfig.events">
        </ui-gmap-polygon>

        <ui-gmap-markers models="compatiblePoints" coords="'self'" idKey="'id'"
            options="pointsConfig.options"
            clickable="true">
        </ui-gmap-markers>


        //This is my code I need help with:
        <ui-gmap-drawing-manager options="config.drawing.options" static="true" control="drawingManagerControl" events="config.map.events">
        </ui-gmap-drawing-manager>

 </ui-gmap-google-map>

这是我的配置文件:

              scope.config = {
                  "map": {
                      "zoom": 12,
                      "pan": true,
                      "center": {
                          "latitude": 51.5200,
                          "longitude": -0.220
                      },
                      "options": {
                          "scrollwheel": false,
                          "streetViewControl": false,
                          "tilt": 45,
                          "zoomControl": true
                      },
                      "events": {
                          "click": scope.editPolygonStop
                      }
                  }
                };

                //I want this to be clicked below when polygon drawn
                scope.editPolygonStop = function(){}

Answer 1

下面的代码解释了如何在 map 上启用绘图管理器、注册要在不同事件上调用的函数以及如何获取多边形路径信息。首先，您需要正确配置绘图管理器选项，如下所示

self.drawingManagerOptions = {
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [                           
                google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.CIRCLE,
                google.maps.drawing.OverlayType.POLYGON,
                google.maps.drawing.OverlayType.POLYLINE,
                google.maps.drawing.OverlayType.RECTANGLE
            ]
        },
        markerOptions: {
            draggable: true
        },
        polylineOptions: {
            editable: true
        },
        rectangleOptions: polyOptions,
        circleOptions: polyOptions,
        polygonOptions: polyOptions
    };

    self.drawingManagerControl = {};

然后您可以为“overlaycomplete”注册事件处理程序(在绘制任何类型的叠加层时调用)，而“polylinecomplete”和“polygoncomplete”仅在绘制折线和多边形时调用:

    self.eventHandler = {
        overlaycomplete: function (dm, name, scope, objs) {

            if (dm.drawingMode !== google.maps.drawing.OverlayType.MARKER) {

                /* Add an event listener that selects the newly-drawn shape when the user
                 * mouses down on it. */
                var newShape = objs[0].overlay;
                newShape.type = objs[0].type;

                google.maps.event.addListener(newShape, 'click', function () {
                    /*Any action to be taken, when shape is clicked*/
                });

            }
        },
        polylinecomplete: function (dm, name, scope, objs) {
            var polyline = objs[0];
            var path = polyline.getPath();

            updateShape (polyline);

            google.maps.event.addListener(path, 'insert_at', updateShape (polyline));

            google.maps.event.addListener(path, 'remove_at', updateShape (polyline));

            google.maps.event.addListener(path, 'set_at', updateShape (polyline));

            google.maps.event.addListener(polyline, 'dragend', updateShape (polyline));


        },
        polygoncomplete: function (dm, name, scope, objs) {
            var polygon = objs[0];


            updateShape(polygon);

            polygon.getPaths().forEach(function (path, index) {

                google.maps.event.addListener(path, 'insert_at', updateShape (polygon));

                google.maps.event.addListener(path, 'remove_at', updateShape (polygon));

                google.maps.event.addListener(path, 'set_at', updateShape (polygon));

            });

            google.maps.event.addListener(polygon, 'dragend', updateShape (polygon));

        }
    };

该函数以编码字符串的形式获取多边形路径，可以存储在DB中。每次绘制、编辑(insert_at、remove_at、set_at)或拖动(dragend)形状时都会调用此方法。我不完全确定您想如何处理多边形数据点

function updateShape(polygon)
    {
        //This variable gets all bounds of polygon.
        var path = polygon.getPath();

        var encodeString =             
        google.maps.geometry.encoding.encodePath(path);

        /* Other actions with the polygon data points */
    }

然后，在 HTML 用户 Gmap 绘图管理器中像这样:

<ui-gmap-drawing-manager options="drawingCtrl.drawingManagerOptions"  control="drawingCtrl.drawingManagerControl" events="drawingCtrl.eventHandler"></ui-gmap-drawing-manager>

这是获取多边形坐标并将其保存在数组中的方法:

/* This function save latitude and longitude to the polygons[] variable after we call it. */
    function save_coordinates_to_array(polygon)
    {
        /* This variable gets all the coordinates of polygone and saves them. 
         * Finally you should use this array because it contains all latitude 
         * and longitude coordinates of polygon. */
        var coordinates = [];

        /* This variable saves polygon. */
        var polygons = [];

        //Save polygon to 'polygons[]' array to get its coordinate.
        polygons.push(polygon);

        //This variable gets all bounds of polygon.
        var polygonBounds = polygon.getPath();

        for (var i = 0; i < polygonBounds.length; i++)
        {
            coordinates.push({lat: polygonBounds.getAt(i).lat(), lng: polygonBounds.getAt(i).lng()});
            coordinates.push(new google.maps.LatLng(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng()));
        }

        return coordinates;
    }