javascript - 自定义控件中的 Angular Maps DrawManager 实例

Question

我很难创建自定义控件来更改 Angular Google map 库中 map 的绘制模式。

我的标记是这样的

                <ui-gmap-google-map id="map" center="map.center" pan="map.pan" zoom="map.zoom" draggable="true" refresh="map.refresh" options="map.options" events="map.events" bounds="map.bounds" dorebuildall="true">
                <ui-gmap-map-control template="js/app/templates/mapToolbar.tpl.html" position="top-right" controller="mapWidgetCtrl"></ui-gmap-map-control>
                    <ui-gmap-polygons models="map.polygons" clickable="true" draggable="true" editable="true" dorebuildall="true"></ui-gmap-polygons>
                <ui-gmap-markers models="mapMarkers" coords="'self'" icon="'icon'" events="clickEventsObject"></ui-gmap-markers>
                <ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" events="drawEventHandler"></ui-gmap-drawing-manager>

            </ui-gmap-google-map>

我的 Controller 是这些(编写最相关的代码部分)

    app.controller('mapSearchCtrl', ["$scope", "$http", function ($scope, $http) {
    $scope.map = {
        center: {
            latitude: 40,
            longitude: 20
        },
        zoom: 9,
        bounds: {},
        polygons: {},
        options: {
            panControl: false,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_BOTTOM
            },
            mapTypeControl: false,
            disableDefaultUI: true
        }
    };

    $scope.drawingManagerOptions = {

        drawingMode: null,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                    google.maps.drawing.OverlayType.POLYGON,
                ]
        },
        polygonOptions: {
            strokeWeight: 3,
            editable: true
        }
    };
    $scope.drawingManagerControl = {};

    $scope.options = {};

    $scope.mapMarkers = [];

    $scope.clickEventsObject = {
        mouseover: markerMouseOver,
        mouseout: markerMouseOut
    };

    $scope.drawEventHandler = {
        polygoncomplete: polygonComplete
    };

 function polygonComplete(drawingManager, eventName, scope, args) {
//$scope.drawingManagerControl.getDrawingManager().setDrawingMode(null); works here
//code...

});

[等]..

带有自定义控件的模板的另一个 Controller 是:

    app.controller('mapWidgetCtrl', ['$scope', function ($scope) {

    $scope.toogleMap = function() {    
        console.log('Change map view via drawingManager');
    };

}]);

我很难在两个 Controller 中手动更改 map View (也无法以某种方式将其从一个 Controller 传递到另一个 Controller )。看来我找不到一种方法来获取除 PolygonComplete 函数之外的任何内容之外的 DrawManager 实例。

任何建议都会有帮助，谢谢。

Answer 1

你可以介绍一个service跨 Controller 共享绘图管理器控制:

app.service('sharedMapProperties', function () {
    var drawingManagerControl = {};

    return {
        setDrawingManagerControl: function (value) {
            drawingManagerControl = value;
        },
        getDrawingManagerControl: function () {
            return drawingManagerControl;
        }
    }
});

现在，一旦 map 初始化，您就可以保存控件(drawingManagerControl 变量):

app.controller('mapSearchCtrl', function ($scope, uiGmapIsReady, sharedMapProperties) {

    //the remaining code is omitted..


    $scope.drawingManagerControl = {};
    sharedMapProperties.setDrawingManagerControl($scope.drawingManagerControl);


});

然后在单击按钮后获得控制权:

app.controller('mapWidgetCtrl', ['$scope', 'sharedMapProperties', function ($scope, sharedMapProperties) {
    $scope.toogleMap = function () {
        var control = sharedMapProperties.getDrawingManagerControl();
        var drawingManager = control.getDrawingManager();
        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.CIRCLE);
        console.log('Change map view via drawingManager');
    };
}]);

Working example