我一直在尝试使用 DrawingManager
使用 Maps API 的官方 Angular 组件包装器,但它没有按预期工作。如果有人可以让它发挥作用,我会很感激能为此找到解决方案。这是我尝试过但没有运气的解决方案的片段和stackblitz链接。 (在 stackblitz 中它无法识别 google 命名空间,但如果您下载它在本地机器上就可以了)
this.drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
}
});
this.drawingManager.setMap(this.map._googleMap);
https://stackblitz.com/edit/angular-vvwbdgGithub 问题链接:
https://github.com/angular/components/issues/18599
编辑1:
原来问题是 map 没有完全加载和设置
DrawingManager
在此之前不会生效。包装器模块中没有加载回调。但是 Angular 的 AfterViewInit 似乎可以很好地完成这项工作。
最佳答案
一旦组件可用,使用 @ViewChild
创建 DrawingManager二传手:
home.component.html:
<div *ngIf="apiLoaded | async">
<google-map [options]="options"></google-map>
</div>
home.component.ts:export class HomeComponent implements OnInit {
@ViewChild(GoogleMap, { static: false }) set map(m: GoogleMap) {
if (m) {
this.initDrawingManager(m);
}
}
apiLoaded: Observable<boolean>;
drawingManager: any;
options: google.maps.MapOptions = {
zoom: 18,
mapTypeId: 'satellite',
disableDefaultUI: true
};
constructor(httpClient: HttpClient) {
this.apiLoaded = httpClient.jsonp('https://maps.googleapis.com/maps/api/js?key=<API_KEY>&libraries=drawing', 'callback')
.pipe(
map(() => true),
catchError(() => of(false)),
);
}
initDrawingManager(map: GoogleMap) {
const drawingOptions = {
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
],
},
polygonOptions: {
strokeColor: '#00ff00',
},
};
this.drawingManager = new google.maps.drawing.DrawingManager(drawingOptions);
this.drawingManager.setMap(map.googleMap);
}
关于angular - 将 DrawingManager 与 @angular/google-maps 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60464878/