AureliaでBingMapsを読み込むのを待つ方法

Aurelia SPAでBingMapsを使用しようとしています。私が行ったことは、インデックスページのヘッドセクションにBingMapsスクリプトタグを追加することです。このように：私は「、今AureliaでBingMapsを読み込むのを待つ方法

map.html

<template> 
    <div id='mainMap' style='width: 100vw; height: 100vh;'></div> 
</template>

map.ts

export class Map 
{ 
    map:Microsoft.Maps.Map; 

    attached(){ 
     this.map = new Microsoft.Maps.Map('#mainMap', {credentials: myKey}); 
     this.map.setView({center: new Microsoft.Maps.Location(45.093,14.114), zoom:15}); 
    } 
}

：次に

<head> 
    <meta charset="utf-8"> 
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release'></script> 
</head>

私はこのようなマップテンプレートとマップコントローラを持っています私のアプリケーションにAurelia Typescript WebPackスケルトンを使用しています。アプリケーションを実行して[マップ]メニューのリンクをクリックすると、すべてが正しく作成され、マップiが表示されます。私PRESブラウザでリフレッシュした場合しかしオーレリアは例外をスローします：地図のコントローラ内の添付メソッドが実行される前に、スクリプトがロードされていない地図などのような

Unhandled rejection TypeError: Cannot read property 'prototype' of null at k (https://www.bing.com/mapspreview/sdk/mapcontrol?branch=release:11:7096) at h (https://www.bing.com/mapspreview/sdk/mapcontrol?branch=release:11:6285) at e (https://www.bing.com/mapspreview/sdk/mapcontrol?branch=release:11:1106) at t.l [as instance] (https://www.bing.com/mapspreview/sdk/mapcontrol?branch=release:11:161) at h (https://www.bing.com/mapspreview/sdk/mapcontrol?branch=release:11:6042) at e (https://www.bing.com/mapspreview/sdk/mapcontrol?branch=release:11:1106) at t.l [as instance] (https://www.bing.com/mapspreview/sdk/mapcontrol?branch=release:11:161) at new Microsoft.Maps.Map (https://www.bing.com/mapspreview/sdk/mapcontrol?branch=release:13:4304) at Map.attached (http://localhost:9000/app.bundle.js:28421:20) at Controller.attached

。 Aureliaに、Attachedメソッドを実行する前にマップスクリプトがロードされるのを待つように指示するにはどうすればよいですか？

出典

2016-12-01 Luka

これはあなたの問題に対する答えではなく、単なるベストプラクティスです。ファイル名には大文字を使用しないでください。 'Map.html'を' map.html'と 'Map.ts'を' map.ts'に変更することをお勧めします。これは、より良い互換性のためです。 Aureliaは命名規則についていくつかの仮定もしており、大文字が時々機能に影響を及ぼす可能性があります。 – LStarky

同意、変更されました。 – Luka

2つのオプションがあります。最初に、マップスクリプトURLにコールバックパラメータを追加し、マップスクリプトがロードされたときに呼び出す関数の名前を渡します。たとえば、

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=LoadMap' async defer></script>

リリースブランチ、つまりマップコントロールが読み込まれるデフォルトのブランチを指定する必要はありません。

2番目のオプションは少し複雑ですが、コールバックメソッドを使用したくない他の人に役立っています。このメソッドは、Microsoft.Maps名前空間を監視し、使用可能になるまで待機します。これは、タイムアウトを使用して行うことができます。例：

function LoadMap(){ 
    if(typeof Microsoft !== undefined && typeof Microsoft.Maps !== undefined){ 
     //Map API available add your map load code. 
    } else { 
     setTimeout(LoadMap, 100); 
    } 
}

出典

2016-12-01 17:30:13 rbrundritt

ありがとうございます。これはします – Luka

AureliaでBingMapsを読み込むのを待つ方法

答えて

関連する問題