无法读取空 bing 映射的属性 'prototype' 和 Angular4

Question

我正在尝试在 angular 4 中制作和 bing 组件，它根本不会让我渲染地图..

这是我的 index.html 文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Microsoft</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experime‌ntal'></script>
</head>
<body onload="AppComponent.helloWorld()">
<div id="myMap"></div>
  <app-root></app-root>
</body>
</html>

这是我的组件：

 export class AppComponent implements OnInit {
  @ViewChild('myMap') myMap;
  title = 'app';

  ngOnInit() {
    if(Microsoft !== undefined){
    var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
      credentials: 'key goes here'
    });
  }}
}

组件HTML文件：

<div #myMap style='width: 100%; height: 500px;'></div>

我不知道我做错了什么。但我无法加载地图。它正在抛出 Cannot read 属性 'prototype' of null error.

Answer 1

执行ngOnInit()时，#myMap不存在，所以将代码移至ngAfterViewChecked()。

Answer 2

在 ngAfterViewInit() 生命周期检查运行之前，使用 @ViewChild 装饰器查询的元素不可用。它们在 ngOnInit() 中是未定义的。尝试将该声明移至

ngAfterViewInit() {
  if(Microsoft !== undefined){
    var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
    credentials: 'key goes here'
    });
 }
}

尽管我没有在您的代码中看到 'Microsoft' 对象的定义位置。您是单独导入它而没有包含它吗？

Answer 3

我终于明白了。嗯，其实是我的同事

所以我的想法是等到文档准备好后再加载组件。

所以在app组件中：免责声明：请勿复制此代码，它不会起作用。我只是在这里闲着。

@Component({
    selector: 'app-root',
    template: '<bing-maps *ngIf="ready"></bing-maps'

})
export class app implements onInit {
ready: boolean;

constructor() {}
ngOnInit(){

document.onreadystatechange = () => {
     if(document.readyState === "complete"){
        this.ready = true
     }
   }

}

}

就是这个想法，在 bing-maps 组件中，您拥有带有 id="myMap" 的 div，并在其 onInit() 中提供凭据。

无法读取空 bing 映射的属性 'prototype' 和 Angular4

Can not read property 'prototype' of null bing maps and Angular4

javascript

bing-maps

typescript

angular

无法读取空 bing 映射的 属性 'prototype' 和 Angular4

Can not read property 'prototype' of null bing maps and Angular4

javascript

bing-maps

typescript

angular

无法读取空 bing 映射的属性 'prototype' 和 Angular4