Угловые карты DrawManager экземпляра в пользовательском контроле

Question

У меня есть diffuculty для создания пользовательского элемента управления, чтобы изменить drawMode карты в Угловой Google Maps библиотеки.

Моя разметка это

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

И мои контроллеры это (написание наиболее соответствующие части кода)

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

}); 

[и т.д.] ..

А другой контроллер для шаблон с пользовательскими элементами управления:

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

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

}]); 

У меня плохое изменение отображения карты вручную в обоих контроллерах (нельзя передавать ее каким-либо образом из одного в другое). Кажется, я не могу найти способ получить экземпляр drawManager вне всего, кроме функции polygonComplete.

Любой совет был бы полезен, спасибо.

Answer 1

Вы могли бы ввести service к доле Drawing Control Manager через контроллеры:

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

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

Теперь вы можете сохранить контроль (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