2014-02-19 4 views
1

AngularJS 애플리케이션에서 Google지도와 상호 작용하고 싶습니다. UI.Map 지시어는 간단하고 사용하기 쉽습니다. 필자는지도에 다각형을 그려서 지형 공간 검색을 트리거하기 위해 맵을 사용해야한다.AngularJS UI.Map 지시어로 Google지도 DrawingManager를 사용하는 방법?

UI.Map 지시문을 사용하여 그리기 컨트롤을 추가하는 방법을 찾지 못했습니다.

UI.Map 지시문 http://angular-ui.github.io/ui-map/의 예제 및 설명서를 기반으로 UI.Map 지시어가 이미 지원되는지 여부를 파악할 수 없었습니다. 비 각 응용 프로그램에서

내가 컨트롤을 만들 DrawingManager를 사용하는 다각형 그리기의 경우 : UI.Map 지시어를 사용하는 경우

var drawingManager = new google.maps.drawing.DrawingManager({…}); 
drawingManager.setMap(map); 

문제는 어떻게 DrawingManager에 액세스 할 수 있습니까?

누가이 문제에 관해 도움을 줄 수 있습니까?

+1

방법이 해결 결국 않았다지도를 에 등 자신의 마커, 다각형을 배치 할 수 있도록 도면 관리자 GUI에서 설정하는 데 사용됩니다 ? – RevNoah

답변

0

uiMapPolygon을 요소로 설정할 수있는 지시문이있는 것처럼 보입니다. 그것이 내가 문서에서 수집 한 것입니다. 불행히도 예상대로 작동하지 않을 수 있으므로 map-tilesloaded UI 이벤트에 의해 트리거되는 기술을 사용했습니다.

 <div ui-map="nggMap" ui-options="mapOptions" ui-event="{ 'map-tilesloaded' : 'drawBoundaries()' }" class="map-canvas"></div> 

컨트롤러에서 먼저 firstLoad 변수를 true로 정의하십시오. 그런 다음 함수를 삽입 :

 var firstLoad = true; 

     $scope.drawBoundaries = function() { 
      if (firstLoad) 
      { 
       var shapeOptions = { 
        strokeWeight: 1, 
        strokeOpacity: 1, 
        fillOpacity: 0.2, 
        editable: false, 
        clickable: false, 
        strokeColor: '#3399FF', 
        fillColor: '#3399FF' 
       }; 

       var drawingManager = new google.maps.drawing.DrawingManager({ 
        drawingMode: null, 
        drawingControlOptions: {drawingModes: [google.maps.drawing.OverlayType.POLYGON]}, 
        polygonOptions: shapeOptions, 
        map: $scope.nggMap 
       }); 

       firstLoad = false; 
      } 
     } 
1

당신은 angular-google-maps 지침과 드로잉 관리자 하위 지시어를 사용할 수 있습니다.

도면 매니저 지시어는 사용자가

관련 문제