javascript - 对于 Angular 谷歌地图，我希望只能从绘图模式中绘制折线，而不是矩形

Question

对于 Angular 谷歌地图，我希望只能从绘图模式中绘制折线，而不是例如矩形。

当绘图完成时，我已经得到了实际的折线工作和记录。

我只是想隐藏其他选项。

我正在将 Angular 版本 1 与 JavaScript 一起使用，并使用 Angular 指令和模板。

简而言之，我需要禁用其他绘图选项。

这是我的 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>

        <ui-gmap-drawing-manager options="drawingManagerOptions" static="true" control="drawingManagerControl" events="config.drawing.events"></ui-gmap-drawing-manager>

    </ui-gmap-google-map>

这是我的指令链接 js 代码:

angular.module("app.directives")
    .directive("map", ["$rootScope", "$timeout", "$window", "uiGmapGoogleMapApi", "uiGmapIsReady", function ($rootScope, $timeout, $window, uiGmapGoogleMapApi, uiGmapIsReady) {
        return {
            restrict: "E",
            templateUrl: "templates/map.html",
            link: function (scope, elem) {    
                //Hides drawing options
                scope.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
                        ]
                    },
                    polylineOptions: {
                        editable: true
                    }
                };

                //TODO - draw polygon with coordinates
                scope.drawPolygon = function(polygonBounds){
                    console.log("drawPolygon");
                    console.log(polygonBounds);
                };

                //Fires once polygon drawing is complete.
                scope.polylinecomplete = function(dm, name, scope, objs){
                    var polygon = objs[0];
                    var coordinates = [];
                    var polygons = [];
                    polygons.push(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()));
                    }

                    console.log(coordinates);
                    scope.drawPolygon(polygonBounds);
                };                

                //Settings for map and drawings
                scope.config = {
                  "map": {
                      "zoom": 12,
                      "pan": true,
                      "center": {
                          "latitude": 51.5200,
                          "longitude": -0.220
                      },
                      "options": {
                          "scrollwheel": false,
                          "streetViewControl": false,
                          "tilt": 45,
                          "zoomControl": true
                      },
                      "events": {
                      },
                      "polygons": []
                  },
                  "drawing": {
                     "events": {
                           //"circlecomplete": scope.polylinecomplete,
                           //"markercomplete": scope.polylinecomplete,
                           //"overlaycomplete": scope.polylinecomplete,
                           "polygoncomplete": scope.polylinecomplete,
                           "polylinecomplete": scope.polylinecomplete,
                           //"rectanglecomplete": scope.polylinecomplete
                      }
                  }
                };        
            }
        };
    }]);

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