2

I want to let a user click a button, to show the draw controls on a map. Once a circle, marker etc has been added, the draw controls are hidden again.

I am building an Angular app and I am using the NgMap directive (https://ngmap.github.io/)

My example code looks like this:

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);
            }            
        });

The function is called on overlayComplete, but the controls are not hidden?

4

1 回答 1

4

检查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 的修补版本（但未使用但经过测试可以正常工作）。

于 2016-02-23T13:30:43.300 回答