javascript - 在 NgMap - Google map 中显示和隐藏绘图控件

Question

我想让用户单击一个按钮，以在 map 上显示绘制控件。添加圆圈、标记等后，绘图控件将再次隐藏。

我正在构建一个 Angular 应用程序，并且正在使用 NgMap 指令 ( https://ngmap.github.io/ )

我的示例代码如下所示:

html:

<ng-map id="myMap">
    <drawing-manager 
        on-overlaycomplete="ctrl.onMapOverlayCompleted()"
                drawingControl="ctrl.showDrawControl">
        </drawing-manager>
</ng-map>

Controller :

vm.showDrawControl = true;
        NgMap.getMap({ id: 'myMap' }).then(function (map) {
            vm.onMapOverlayCompleted = function (event) {
                vm.showDrawControl = false;
                alert(vm.showDrawControl);
            }            
        });

在overlayComplete上调用函数，但控件没有隐藏？

Answer 1

检查ng-map的源代码，我发现drawingControl属性的观察者缺失，因此在使用Angular进行初始设置后无法更新绑定(bind)。

解决该问题的两种选择:

1) 修补 ng-map.js 将以下代码添加到 drawingManager directive :

    attrs.$observe('drawingcontrol', function (newValue) {
        drawingManager.setOptions({
          drawingControl: (newValue=="true" ? true : false)
        });
    });

2) 直接使用 Google map API，如所述 here

    map.mapDrawingManager[0].setOptions({drawingControl:false/true})

检查我的插件是否有选项 2:

http://plnkr.co/edit/KUCMVdgRZ3TsN9P0FlZR

P.S.:在上面的 Plunker 中，您还可以看到 ng-map 的修补版本(但是未使用，但测试正常)。