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メソッドを実行する前にマップスクリプトがロードされるのを待つように指示するにはどうすればよいですか?
これはあなたの問題に対する答えではなく、単なるベストプラクティスです。ファイル名には大文字を使用しないでください。 'Map.html'を' map.html'と 'Map.ts'を' map.ts'に変更することをお勧めします。これは、より良い互換性のためです。 Aureliaは命名規則についていくつかの仮定もしており、大文字が時々機能に影響を及ぼす可能性があります。 – LStarky
同意、変更されました。 – Luka