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

Question

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

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

我的示例代码如下所示：

html:

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

控制器：

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 绑定。

解决问题的两种方法：

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

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

2) 直接使用 Google 映射 API 如所述 here

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

检查我的 plunker 是否有选项 2：

http://plnkr.co/edit/KUCMVdgRZ3TsN9P0FlZR

P.S.: 在上面的 Plunker 中，您还可以看到 ng-map 的补丁版本（但未使用但经过测试可以正常工作）。

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

Show and hide drawcontrols in NgMap - Google Maps

javascript

google-maps

angularjs

ng-map