在绘图管理器中显示/隐藏所有图形绘图

Show/hide all figures drawing in drawingManager

本文关键字：绘图 隐藏所 图形 显示 管理器      更新时间：2023-09-26

我的项目与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 中没有任何方法可以处理这些数字。现在我尝试使用数字选项的可见属性来做到这一点： var anchorShowHideFigure = true; var polyOption = {visible = anchorShowHideFigure }; 然后我想在单击按钮后将标志更改为 false。如果我在我的 1-st 指令中写： function showHideDrawingFigures () { anchorShowHideFigure = false; }; 在控制台中，我得到："显示隐藏绘图数字未定义"。如果我将其写入 2-nd 指令，我会得到："anchorShowHideFigure is not definied"，我得到这个，因为我的 html 文件使用 2-nd 指令。对不起，如果我解释得很复杂——

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

创建一个标志说显示数字，在$scope。用于切换荧光

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

在 HTML 中，

<div ng-show="showFigures"></div>
相关文章：