Javascript 如何使用绘图管理器从google地图中删除绘制的圆或多边形-ng2地图

如何使用绘图管理器从google地图中删除绘制的圆或多边形

组件：

import {Ng2MapComponent, DrawingManager, Polygon} from 'ng2-map';

export class CreateAlertComponent implements OnInit {
   @ViewChild(Ng2MapComponent) mapObj: Ng2MapComponent;
   @ViewChild(DrawingManager) drawingManager: DrawingManager;

   polygonCompleteFunction(e) {
       console.log(this.mapObj);
   };

});

<ng2-map [zoom]="mapOptions.zoom" [minZoom]="mapOptions.minZoom" [center]="mapOptions.center" clickable="false" (click)="mapClick($event)">
                    <drawing-manager *ngIf = "selectedJurisdictions.length > 0" 
                        [drawingMode]="'null'"
                        [drawingControl]="true"
                        [drawingControlOptions]="{
                        position: 2,
                        drawingModes: ['circle', 'polygon']
                        }"
                        [circleOptions]="{
                        fillColor: 'red',
                        fillOpacity: 0.3,
                        strokeColor: 'black',
                        strokeWeight: 2,
                        editable: true,
                        draggable: true,
                        zIndex: 1
                        }"
                        [polygonOptions]="{
                        fillColor: 'red',
                        fillOpacity: 0.3,
                        strokeColor: 'black',
                        strokeWeight: 2,
                        editable: true,
                        draggable: true,
                        zIndex: 1
                        }"
                        (polygoncomplete)="polygonCompleteFunction($event)"
                        (circlecomplete)="circleCompleteFunction($event)">
                    </drawing-manager>
</ng2-map>

HTML:

import {Ng2MapComponent, DrawingManager, Polygon} from 'ng2-map';

export class CreateAlertComponent implements OnInit {
   @ViewChild(Ng2MapComponent) mapObj: Ng2MapComponent;
   @ViewChild(DrawingManager) drawingManager: DrawingManager;

   polygonCompleteFunction(e) {
       console.log(this.mapObj);
   };

});

<ng2-map [zoom]="mapOptions.zoom" [minZoom]="mapOptions.minZoom" [center]="mapOptions.center" clickable="false" (click)="mapClick($event)">
                    <drawing-manager *ngIf = "selectedJurisdictions.length > 0" 
                        [drawingMode]="'null'"
                        [drawingControl]="true"
                        [drawingControlOptions]="{
                        position: 2,
                        drawingModes: ['circle', 'polygon']
                        }"
                        [circleOptions]="{
                        fillColor: 'red',
                        fillOpacity: 0.3,
                        strokeColor: 'black',
                        strokeWeight: 2,
                        editable: true,
                        draggable: true,
                        zIndex: 1
                        }"
                        [polygonOptions]="{
                        fillColor: 'red',
                        fillOpacity: 0.3,
                        strokeColor: 'black',
                        strokeWeight: 2,
                        editable: true,
                        draggable: true,
                        zIndex: 1
                        }"
                        (polygoncomplete)="polygonCompleteFunction($event)"
                        (circlecomplete)="circleCompleteFunction($event)">
                    </drawing-manager>
</ng2-map>

---

但是在多边形完成函数或圆完成上，我没有从地图对象获取绘制的多边形

您可以从

CircleComplete

/

PolygonComplete

事件的参数中找到绘制的多边形或圆。或者通过event.overlay从OverlayComplete事件的参数中查找目标。 获取目标对象后，可以将其保留在某个位置，以便在其他位置删除它们

polygonCompleteFunction(e) {
   console.log(e);    // this is the drawn Polygon you are looking for, and same for the circleComplete event
};

overlayComplete(e) {
  console.log(e.overlay);  // here can also find the drawn shape(Polygon/Circle/Polyline/Rectangle)
}

删除目标多边形或圆时，请通过引用之前保留的实例来删除它们

target.setMap(null);

以下是关于OverlyComplete事件的GooleMappi文档：

google.maps.event.addListener（drawingManager，'circlecomplete'，函数（圆圈） { var radius=circle.getRadius（）； });

google.maps.event.addListener（drawingManager，'OverlyComplete'，函数（事件） { 如果（event.type=='circle'）{ var radius=event.overlay.getRadius（）； } });

以下是GoogleMapApi文档的链接

---

希望能有帮助。这里有一个你可以参考的链接。

参考这个链接，它肯定会对你有所帮助。[点击]（）参考此链接，它肯定会对您有所帮助。