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

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

bing-maps typescript angular javascript

vineeth · 技术社区 · 7 年前

我正在尝试在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 回复 | 直到 6 年前

Vega Stipe 7 年前

当时 ngOnInit() ngAfterViewChecked()

diopside 7 年前

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

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

vineeth 7 年前

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

所以在应用程序组件中:

@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()中,你提供凭证。

推荐文章

user3587624 · 禁用FluentUI React组件上的onClick事件

1 年前

Devmix · 如何在new Map()中保存状态?

1 年前

programmerGuy · 使用useState时获取不可分配给参数的接口

1 年前

Luisus · 从Prisma 5客户端提取类型

1 年前

Rostys · TypeScript:使用类型转换进行类型保护

1 年前

Raffaele · TS2304:当types.d.ts导出某些内容时,找不到名称ENDPOINT

1 年前

Anne · 类型不一致的对象的TypeScript类型定义

1 年前

tuimui · 使用react+ts通过道具传递数据

1 年前

FJ97 · 错误NullInjectorError:R3InjectorError(AppModule)[MatDialogConfig->MatDialogConfig]:

1 年前

Pooria Sadeghy · Vitest-类型错误:_ctx$t不是函数

1 年前