は角4で財産ヌルビングマップの「原型」とAngualar4

私が作るしようとしています

とビング・コンポーネントを読み取ることができません、それは文句を言わない私にはまったくマップをレンダリングしてみましょう：は角4で財産ヌルビングマップの「原型」とAngualar4

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

私は何が間違っているのか分かりません。しかし、私はロードするマップを取得することはできません。それは投げているのは、nullエラーのプロパティ 'プロトタイプ'を読み取ることができません。

出典

2017-08-22 vineeth

私は何をインポートする必要があるのか教えていただけますか？ – Vega

私はついにそれを理解しました。まあ、実際には私の同僚。

したがって、ドキュメントが準備できるまで待ってから、コンポーネントをロードしてください。

したがって、アプリケーションコンポーネント：免責事項：このコードをコピーしないでください。動作しません。私はここで自由に手渡しています。

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

} 

}

はあなたにid =「MYMAP」とし、その中のOnInit div要素を持っているビングマップコンポーネントでは、アイデアのthats（）あなたは資格情報を与えます。

出典

2017-08-24 19:45:23 vineeth

ngOnInit()を実行すると#myMapが存在しないので、コードをngAfterViewChecked()に移動してください。

出典

2017-08-22 20:03:38 Vega

@ViewChildデコレータで照会される要素は、ngAfterViewInit（）ライフサイクルチェックが実行されるまで利用できません。それらはngOnInit（）で未定義になります。その宣言を

に移動してください。

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

「Microsoft」オブジェクトが定義されているコードでは表示されませんが、あなたはそれを別々にインポートしていますが、あなたはそれを含んでいませんか？

出典

2017-08-22 20:13:26 diopside

それが何であるかわからない、私はちょうど 'マイクロソフト'がtypescriptまたは角度のネイティブオブジェクトではないことを知っている...それはどこかで定義する必要がある...この行で - if（Microsoft！== undefined）マイクロソフトのオブジェクトには、しかし、そのオブジェクトが定義されているかどうかは明らかではありませんが、私はそのビンスクリプトタグによってインポートされると仮定しますが、ソースを見る必要があります。？ – diopside

あなたが言ったようにスクリプトタグを使用してMSDNを見て、新しいMicrosoft.Maps.Maap（....）を使ってマップを初期化しました。同じことをやっています。これをgでoogleマップとそれは完全に正常に働いた。今、MicrosoftはMicrosoftとの契約を結んでいるBing Mapsを調べるよう求めている。とにかく...。私はちょうどのようなコンポーネントの上部にMicrosoftを宣言しました.. 宣言var MIcrosoft; – vineeth

まだ同じエラーが発生しています。あなたが言うように、私は新しい角度になっています。 – vineeth

は角4で財産ヌルビングマップの「原型」とAngualar4

答えて

関連する問題