Initializing google map with kml layer using Angular: InvalidValueError: setMap: not an instance of Map

Question

我正在尝试使用 kml 图层初始化 google 地图。我已经验证 KML 层正在工作，如果我使用 vanilla JS，我可以让它工作（参见工作的 fiddle：https://jsfiddle.net/x00t510d/2/），但是我使用的是 angular 和我正在 ngOnInit() 中初始化地图。

以下代码生成 "InvalidValueError: setMap: not an instance of Map" 的结果。

    export class MapComponent implements OnInit {
  @ViewChild('gmap') gmapElement: any;
  map: google.maps.Map;

  constructor() { }

  ngOnInit() {

    let mapProp: any = {
      center: new google.maps.LatLng(44.475, -73.212),
      zoom: 13,    
      mapTypeId: google.maps.MapTypeId.ROADMAP     
    };

     let ctaLayer = new google.maps.KmlLayer({
      url: 'https://sites.google.com/site/freeparkingburlington/home/freeParking.kml',
      map: mapProp
    });

  return this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
  }  

}

地图确实得到了初始化，但图层没有。有没有人知道如何在这种情况下更有效地使用 KML 层？

Answer 1

问题在于初始化地图，以及 ngOnInit 生命周期挂钩上的 kml 层。地图应在 ngOnInit() 中初始化，加载后调用 ngAfterContentInit 将图层添加到地图。

在此处查看代码：

export class MapComponent implements OnInit, AfterContentInit {
  @ViewChild('gmap') gmapElement: any;
  map: google.maps.Map;
  //ctaLayer: google.maps.KmlLayer;

  constructor() { }

  ngOnInit() {

    let mapProp: any = {
      center: new google.maps.LatLng(44.475, -73.212),
      zoom: 13,    
      mapTypeId: google.maps.MapTypeId.ROADMAP     
    };

  return this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
  }  

  ngAfterContentInit(){
    let ctaLayer = new google.maps.KmlLayer({
      url: 'https://sites.google.com/site/freeparkingburlington/home/freeParking.kml',
      map: this.map
    });
  }

}

Initializing google map with kml layer using Angular: InvalidValueError: setMap: not an instance of Map

Initializing google map with kml layer using Angular: InvalidValueError: setMap: not an instance of Map

angular

google-maps

kml