在drawingManager中显示/隐藏所有图形

Question

我的项目与 GPS 和跟踪系统有关。我用drawingManager在谷歌地图api v3上绘制地理围栏。我需要一个按钮，单击它将显示/隐藏所有绘图管理器数字。在我的项目中，我也使用 angularJS。我有 2 个不同的指令。在 1-st 我声明绘图管理器

var polyOption = {
    fillColor: '#ffff00',
    fillOpacity: 0.4,
    strokeWeight: 1,
    clickable: true,
    editable: true,
    zIndex: 1
};
drawingManager = new google.maps.drawing.DrawingManager({
    drawingControl: true,
    drawingControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
            drawingModes: [
              google.maps.drawing.OverlayType.MARKER,
              google.maps.drawing.OverlayType.CIRCLE,
              google.maps.drawing.OverlayType.POLYGON,
              google.maps.drawing.OverlayType.POLYLINE,
              google.maps.drawing.OverlayType.RECTANGLE
            ]
     },
     circleOptions: polyOption,
     rectangleOptions: polyOption,
     polygonOptions: polyOption,
     polylineOptions: polyOption,
});
scope.geozonesConfig.tempDrawManagerVar = true;
scope.geozonesConfig.tempDrawManagerHide = false;
drawingManager.setMap(map);


google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    if (e.type != google.maps.drawing.OverlayType.MARKER) {
        // Switch back to non-drawing mode after drawing a shape.      
        drawingManager.setDrawingMode(null);
        // To hide:              
        // Add an event listener that selects the newly-drawn shape when the user
        // mouses down on it.
        var newShape = e.overlay;                      
        newShape.type = e.type;
        google.maps.event.addListener(newShape, 'click', function() {
          setSelection(newShape);
          scope.$apply (function () {
            scope.geozonesConfig.showGeozoneConfig = true;
          });
        });
    setSelection(newShape);
});
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
buildColorPalette();

这是我的按钮。我使用了 ng-click：

 <a href="javascript:void(0)" title="{{ 'Add geozone' | translate }}" ng-click="onGeozoneClick()"><i class="icon-globe"></i></a>

`而我的函数位于另一个指令中：

 scope.onGeozoneClick = function () {
            alert('Show/Hide all figures');
 };

如何显示/隐藏这些绘图管理器图形？谢谢。

编辑：更新来自 OP 的回复作为答案

我如何在 js 中做到这一点？我不知道如何参考我的数字。据我所知，这些数字在谷歌地图 api 中没有任何方法。现在我尝试使用figuresOptions的可见属性来做到这一点： var anchorShowHideFigure = true; var polyOption = {visible = anchorShowHideFigure }; 然后我想在单击按钮后将标志更改为 false。如果我将在我的 1-st 指令中写： function showHideDrawingFigures () { anchorShowHideFigure = false; }; 在控制台中我得到：“showHideDrawingFigures 未定义”。如果我将它写入 2-nd 指令，我会得到：“anchorShowHideFigure 未定义”我得到这个，因为我的 html 文件使用 2-nd 指令。对不起，如果我解释得很复杂 -

Answer 1

为此检查 ng-show 和 ng-hide 指令。

在 $scope 中创建一个标志，比如 showFigures。用于切换 fla

$scope.onGeozoneClick = function () {
        $scope.showFigures = false;
 };

在 HTML 中，

<div ng-show="showFigures"></div>