Question

我想在AngularJS应用程序中与Google Map进行交互。 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的问题？

有谁可以在这方面提供一些帮助？

Answer 1

您可以使用angular-google-maps指令及其绘图管理器子指令。

drawing-manager指令用于打开绘图管理器 GUI允许用户放置自己的标记，多边形等地图

Answer 2

似乎应该有一个指令允许你将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;
            }
        }

如何使用带有AngularJS UI.Map指令的Google地图DrawingManager？

2 个答案: