如何使用谷歌地圖DrawingManager與AngularJS UI.Map指令？

我想在AngularJS應用程序中與Google Map進行交互。 UI.Map指令看起來很簡單，使用簡單。對於我的用例，我需要使用地圖通過在地圖上繪製多邊形來觸發地理空間搜索。如何使用谷歌地圖DrawingManager與AngularJS UI.Map指令？

我還沒找到使用UI.Map指令添加繪圖控件的方法。

基礎上UI.Map指令http://angular-ui.github.io/ui-map/我沒有設法弄清楚是否或如何他被UI.Map指令已經支持的例子和文檔。

在非角程序，我使用的DrawingManager創建控件，用於繪製多邊形：

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

問題使用UI.Map指令時，如何可以訪問到的DrawingManager？

有誰可以在這方面提供一些幫助？

來源

2014-02-19 jojrg

你是如何最終解決這個？ – RevNoah

看起來好像應該有一個指令，讓您將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; 
      } 
     }

來源

2014-03-11 17:05:37 RevNoah

您可以使用angular-google-maps指令及其drawing-manager子指令。

汲取經理指令用於打開描繪管理 GUI，允許用戶將自己的標記，多邊形等上地圖

來源

2014-10-25 13:59:07

如何使用谷歌地圖DrawingManager與AngularJS UI.Map指令？

回答

相關問題