AureliaでBingMapsを使用する方法

私のアプリにaurelia skeleton typescript webpackテンプレートを使用しています。私はページにBingMapsを追加し、画鋲などを追加することができるようにしたいこれまでのところ、私はこれをやった：AureliaでBingMapsを使用する方法

map.html

：

index.html - I added a script tag that loads the map from CDN

<head> 
... 
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script> 
</head>

は、その後、私はこのようなテンプレートを追加しました

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

、私はマップコントローラを持っている：

map.ts

export class Map { 

    private map: Microsoft.Map.Map; 

    attached() { 
     this.map = new Microsoft.Maps.Map('mainMap', { credentials:'mycredentials - omitted'}); 
     ... 
    } 
}

ここで、アプリケーションを開始すると、（スケルトンからの）ウェルカムが表示されます。次に、[地図]メニューのリンクをクリックすると、マップページが完全にロードされた状態で表示されます。しかし、私はマップはもう表示されていないとエラーがコンソールに表示されているブラウザ（F5またはCtrl + F5）でリフレッシュをクリックした場合：

bluebird.js:1546 Unhandled rejection TypeError: Cannot read property 'prototype' of null at k (https://www.bing.com/mapspreview/sdk/mapcontrol:11:7096) at h (https://www.bing.com/mapspreview/sdk/mapcontrol:11:6285) at e (https://www.bing.com/mapspreview/sdk/mapcontrol:11:1106) at t.l [as instance] (https://www.bing.com/mapspreview/sdk/mapcontrol:11:161) at h (https://www.bing.com/mapspreview/sdk/mapcontrol:11:6042) at e (https://www.bing.com/mapspreview/sdk/mapcontrol:11:1106) at t.l [as instance] (https://www.bing.com/mapspreview/sdk/mapcontrol:11:161) at new Microsoft.Maps.Map (https://www.bing.com/mapspreview/sdk/mapcontrol:13:4304) at Map.attached (http://localhost:9000/app.bundle.js:31267:20) at Controller.attached (http://localhost:9000/aurelia.bundle.js:6438:22) at View.attached (http://localhost:9000/aurelia.bundle.js:4524:23) at ViewSlot.attached (http://localhost:9000/aurelia.bundle.js:4883:13) at View.attached (http://localhost:9000/aurelia.bundle.js:4534:19) at ViewSlot.attached (http://localhost:9000/aurelia.bundle.js:4883:13) at http://localhost:9000/aurelia.bundle.js:14717:28

Mapオブジェクトをインスタンス化しようとしているときに、このエラーがスローされますマップコントローラーのAttachedイベントに追加します。

なぜこれが起こっているのですか？これをどのように解決できますか？あなたは外部スクリプトが完全に読み込まれる前にマップをインスタンス化しようとしているためです

おかげ

出典

2016-12-15 Luka

この問題を解決する鍵は、APIは、私たちはスクリプトのURLで指定することができますcallbackパラメータを使用することです。私はこれを行うカスタム要素を作成しました。スクリプトは、モジュールが最初にロードされるときにロードされます。カスタム要素のインスタンスは、コールバック関数が呼び出されるのを待ちます。もともと私はMutationObserverとデータ属性を持つ複雑な設定を使用していましたが、Jeremy Danyowと話をした後、彼はコールバックの "Promisifying"が解決策をはるかに簡単に解決すると指摘しました。この簡単な解決法を以下に示します。

カスタム要素は現在、マップの現在の中心点を取得する以外に、マップとやりとりするためのAPIを提供していませんが、あなたを助けてくれるよい出発点です。

ビング-map.ts

import { bindable, bindingMode, inlineView } from 'aurelia-framework'; 

const controlUrl = '//www.bing.com/api/maps/mapcontrol?callback=bingMapsLoaded'; 
const ready = new Promise(resolve => window['bingMapsLoaded'] = resolve); 

let scriptTag: HTMLScriptElement = document.createElement('script'); 

scriptTag.async = true; 
scriptTag.defer = true; 
scriptTag.src = controlUrl; 

document.head.appendChild(scriptTag); 

@inlineView('<template><div ref="container" css="width: ${width}; height: ${height};"></div></template>') 
export class BingMapCustomElement { 
    private container: HTMLElement; 
    private map: Microsoft.Maps.Map; 
    private viewChangeHandler: Microsoft.Maps.IHandlerId; 

    @bindable apiKey = ''; 
    @bindable height = '600px'; 
    @bindable width = '400px'; 

    @bindable({ defaultBindingMode: bindingMode.twoWay }) location: Microsoft.Maps.Location | string; 

    attached() { 
    return ready.then(() => { 
     this.map = new Microsoft.Maps.Map(this.container as HTMLElement, { 
     credentials: this.apiKey 
     }); 

     this.location = this.map.getCenter(); 

     this.viewChangeHandler = Microsoft.Maps.Events.addHandler(this.map, 'viewchange', e => { 
     this.location = this.map.getCenter(); 
     }); 
    }); 
    } 

    detached() { 
    if (this.viewChangeHandler) { 
     Microsoft.Maps.Events.removeHandler(this.viewChangeHandler); 
    } 

    if (this.map) { 
     this.map.dispose(); 
     this.map = null; 
    } 
    } 
}

使用

<bing-map api-key.bind="mapsApiKey" width="100px" height="100px"></bing-map>

出典

2016-12-15 18:59:09

これは素晴らしい解決策のように見え、私の解決策よりも再利用可能です。これは素晴らしいAureliaのアプローチです！ @ルカ、私はあなたがこの方法を試してくださいと思います。 – LStarky

ありがとう@LStarky！あなたが投稿したソリューションについて悪いことを言うつもりではなかったことを知っているだけで、私はまだタイミング問題に苦しんでいることを指摘していました。タイミングの問題を理解するまでにはしばらく時間がかかりました。 :-) –

私の答えでは、開発者が複数のマップをページに配置したい場合や、アプリ内の別の場所でマップを使用したい場合でも動作するものを得ることが重要でした。しかし、人、私は突然変異の観察者と狂ったルートを下ったのですか？しかし、ねえ、私はそのAPIを使って作業する方法を学んだので、時間の無駄ではありませんでした:-) –

を助けてください。あなたの最初のシナリオでは動作しますが、ダイレクトリフレッシュを実行しても機能しません。

ここに掲載優れたソリューションがあります：

How to wait BingMaps to be loaded in Aurelia

コールバック解決策の問題は、あなたがかどうかをあなたに盲目であるindex.htmlを外部スクリプトをロードしているということです現在地図を表示したい。したがって、2番目のソリューションがより適切です。しかし、私はその解決策がESNextコードのために書かれたと思いますし、TypeScriptを使用しています。つまり、typeofプロパティは決して定義されません。 map.tsのための次のコードは、（あなたは、私はそれをテストすることができませんでしたので、それを少しデバッグが必要になる場合があります）あなたのコンテキストでより良い仕事になります。

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

    attached() { 
    this.loadMap(); 
    } 

    loadMap() { 
    if ((Microsoft == null) || (Microsoft.Maps == null)) { 
     // not yet available, keep trying (dirty checking) 
     setTimeout(this.loadMap, 100); 
    } else { 
     // Map API available; proceed to render the map 
     this.map = new Microsoft.Maps.Map('#mainMap', {credentials: myKey}); 
     this.map.setView({center: new Microsoft.Maps.Location(45.093,14.114), zoom:15}); 
    } 
    } 
}

代わりundefinedのif ((Microsoft == null) || (Microsoft.Maps == null))テストを注意してくださいテスト。

（ジェイソン・ソベルによって）もう一つの大きな解決策

http://www.sobell.net/calling-external-javascript-from-within-aurelia-templates/

は（いくつかのコールバック調査後）第三優れたソリューション

あなたはこのなし外部スクリプトのリンクを実装することができますindex.htmlで、これは動的にローディングメカニズムを提供する必要があるためです。

export class Map 
{ 
    private map: any; 

    attached() { 
    this.loadScript("//www.bing.com/api/maps/mapcontrol?onload=callback"); 
    } 

    loadScript(sScriptSrc) { 
    var oHead = document.getElementsByTagName("head")[0]; 
    var oScript = document.createElement('script'); 
    oScript.type = 'text/javascript'; 
    oScript.src = sScriptSrc; 
    oHead.appendChild(oScript); 
    oScript.onload = this.loadMap(); 
    } 

    loadMap() { 
    // Map API available; proceed to render the map 
    this.map = new Microsoft.Maps.Map('#mainMap', {credentials: myKey}); 
    this.map.setView({center: new Microsoft.Maps.Location(45.093,14.114), zoom:15}); 
    } 
}

出典

2016-12-15 11:11:06 LStarky

はい、私はそれを試してみました。それはstackoverflow上の私の質問だった。問題は、loadMap関数が同じ例外をスローすることです。そして、（type！Microsoft！== undefined && type of Microsoft.Maps！== undefined）それは常に真であるので、スクリプトがロードされているように見えます。 – Luka

おっと、私はあなたが同じ人であることを気付かなかった。私が1時間以内に仕事をしたら、それをもっと見ていきます。 – LStarky

コールバック関数を実装しようとしましたか？これは間違いなく最もクリーンなソリューションのようで、上の未定義のチェックを必要としません。私は上記のより完全なソリューションを提供しようとします。 – LStarky

AureliaでBingMapsを使用する方法

答えて

関連する問題