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

Question

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

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

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

这是我当前的代码：

 <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

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

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

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

For angular google maps I want my scope function to call once the polygon drawing is done

javascript

google-maps

angularjs

angular-google-maps