在 NgMap 中显示和隐藏绘制控件 - 谷歌地图

Show and hide drawcontrols in NgMap - Google Maps

本文关键字：绘制 控件 谷歌地图 隐藏 NgMap 显示      更新时间：2023-09-26

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

我正在构建一个 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 上调用，但控件没有隐藏？

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

解决此问题的两种替代方法：

1）修补ng-map.js将以下代码添加到drawingManager指令中：

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

2）直接使用谷歌地图API，如此处所述

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

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

http://plnkr.co/edit/KUCMVdgRZ3TsN9P0FlZR

PS：在上面的Plunker中，您还可以看到ng-map的修补版本（但是未使用，但测试为有效）。

相关文章：