代码之家 › 专栏 › 技术社区 › vineeth

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

bing-maps typescript angular javascript

1

vineeth · 技术社区 · 8 年前

我正在尝试在angular 4中制作和bing组件,它根本不允许我渲染地图。。

<!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>

我不知道我做错了什么。但我无法加载地图。它抛出了无法读取属性“prototype”的null错误。

3 回复 | 直到 7 年前

1

0

Vega Stipe 8 年前

当时 ngOnInit() ngAfterViewChecked()

2

0

diopside 8 年前

在运行ngAfterViewInit()生命周期检查之前,使用@ViewChild decorator查询的元素不可用。它们在ngOnInit()中未定义。尝试将该声明移动到

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

3

0

vineeth 8 年前

因此,我们的想法是等待文档准备就绪,然后加载组件。

所以在应用程序组件中:

@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地图组件中,你有一个id为=“myMap”的div,在它的onInit()中,你提供凭证。