将DrawingManager与@angular/google地图一起使用

我一直在尝试将

DrawingManager

与mapsapi的官方角度组件包装一起使用，但它没有发挥应有的作用。如果有人能做到这一点，我会很感激能找到解决办法。这是我尝试过的解决方案的代码片段和stackblitz链接，但没有成功。（在stackblitz中，它没有识别google名称空间，但如果您下载它，在本地机器上就可以了）

Github问题链接：

编辑1：

---

事实证明，问题在于地图没有完全加载，并且在此之前设置的

DrawingManager

没有生效。这个包装器模块中没有加载回调，所以我能找到的最安全的方法是click方法。用户需要单击一次，以便启用

DrawingManager

。我认为应该有一个更好的解决方案。

首先，您需要添加一个Google API密钥来使用所描述的maps API

对于角度，建议使用组件。你可以找到一个有效的Stackblitz

---

如果您想在没有agm的情况下工作，您必须实现自己的服务来加载脚本，就像在中完成一样。

我遇到了以下讨论：

Maps组件的主要贡献者表示，他不打算添加加载回调或任何与底层MapAPI相关的内容，所以我采用了另一种黑客方法来了解map是否加载到组件中

组件。ts:

mapLoaded = false;
idleMap(event: any)  {
    if(this.mapLoaded)
      return;
    this.mapLoaded = true;
    this.drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      map:this.map._googleMap,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
      }
    });
    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => {
      if (event.type === google.maps.drawing.OverlayType.POLYGON) {
        let ar = event.overlay.getPath().getArray();
        ar.push(ar[0]);
        this.model.location.push(ar);
      }
    });
  }

<google-map
    (tilesloaded)="idleMap($event)">
  </google-map>

html:

mapLoaded = false;
idleMap(event: any)  {
    if(this.mapLoaded)
      return;
    this.mapLoaded = true;
    this.drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      map:this.map._googleMap,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
      }
    });
    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => {
      if (event.type === google.maps.drawing.OverlayType.POLYGON) {
        let ar = event.overlay.getPath().getArray();
        ar.push(ar[0]);
        this.model.location.push(ar);
      }
    });
  }

<google-map
    (tilesloaded)="idleMap($event)">
  </google-map>

---

组件可用后，使用

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

导出类HomeComponent实现OnInit{
@ViewChild（GoogleMap，{static:false}）集合映射（m:GoogleMap）{
如果（m）{
这是一名初始绘图经理（m）；
}
}
可观察的：可观察的；
绘图经理：任何；
选项：google.maps.MapOptions={
缩放：18，
mapTypeId:'卫星'，
disableDefaultUI:true
};
构造函数（httpClient:httpClient）{
this.apiload=httpClient.jsonp（'https://maps.googleapis.com/maps/api/js?key=&libraries=drawing“，”回调“）
.烟斗(
映射（（）=>true），
catchError（（）=>of（false）），
);
}
initDrawingManager（地图：谷歌地图）{
常量绘图选项={
drawingMode:google.maps.drawing.OverlyType.POLYGON，
drawingControl：对，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
绘图模式：[
google.maps.drawing.OverlyType.POLYGON，
],
},
多克隆选择：{
strokeColor:“#00ff00”，
},
};
this.drawingManager=新的google.maps.drawing.drawingManager（drawingOptions）；
this.drawingManager.setMap（map.googleMap）；
}

感谢您的回答，我已经从stackblitz中故意删除了api密钥，因为我无法公开不受限制的api密钥，而且它可以在开发模式下工作。手动加载是一个选项，但并不完全是我想要的。我的观点是使用官方Google Maps组件的可能性，因为它可能比l更干净手动和我认为使用官方的一个更好的选择比AGM。如果没有解决方案，我会去与AGM，感谢Np，如果你喜欢看这里