Question

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

绘制多边形后，我需要调用我的指令范围函数scope.polygonDrawn（）并知道绘制的点吗？

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

这是我目前的代码：

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

这是我对于cofig的js：

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

然后你可以为＆＃34; overlaycomplete＆＃34;注册事件处理程序。（当绘制任何类型的叠加时调用），而＆＃34; polylinecomplete＆＃34;和＆＃34; polygoncomplete＆＃34;仅在绘制折线和多边形时调用：

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

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

1 个答案: