如何使用BingMaps和Aurelia

我正在爲我的應用使用aurelia骨架打字稿webpack模板。我想BingMaps添加到頁面，並能夠添加圖釘等到目前爲止，我已經做到了這一點：如何使用BingMaps和Aurelia

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>

然後我加了這樣的一個模板：

map.html

<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'}); 
     ... 
    } 
}

現在，如果我啓動應用程序，歡迎screent（從骨架）顯示。然後我點擊'地圖'菜單鏈接，地圖頁面顯示地圖完全加載。但如果我點擊刷新瀏覽器（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對象在地圖控制器的附加事件中。

爲什麼會發生這種情況，我該如何解決這個問題？請幫助

感謝

來源

2016-12-15 Luka

解決這一問題的關鍵是使用callback參數，該API允許我們在腳本的URL指定。我已經創建了一個自定義元素來執行此操作。腳本在模塊最初加載時加載。自定義元素的任何實例都將等待回調函數被調用。我原本使用的是一個具有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的外部腳本，這是盲目的你是否目前想要顯示地圖。所以第二種解決方案更合適。但是，我認爲解決方案是爲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}); 
    } 
    } 
}

注意if ((Microsoft == null) || (Microsoft.Maps == null))測試，而不是undefined的測試。

另一個偉大的解決方案（由Jason Sobell）

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函數拋出相同的異常。如果（typeof Microsoft！== undefined && typeof Microsoft.Maps！== undefined）它總是如此，所以腳本似乎被加載。 – Luka

哎呀，我不知道你是同一個人。當我在一個小時內上班時，我會更多地考慮它。 – LStarky

您是否嘗試實現回調函數？這絕對是最乾淨的解決方案，不需要上面的未定義檢查。我會盡力給出更完整的解決方案。 – LStarky

如何使用BingMaps和Aurelia

回答

相關問題