如何使用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对象在地图控制器的附加事件中。

为什么会发生这种情况，我该如何解决这个问题？请帮助

感谢

答

解决这一问题的关键是使用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>

这看起来像一个很好的解决方案，比我的解决方案更具可重用性，这是一个伟大的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}); 
    } 
}

是的，我试过了。这是我在stackoverflow上的问题。问题是loadMap函数抛出相同的异常。如果（typeof Microsoft！== undefined && typeof Microsoft.Maps！== undefined）它总是如此，所以脚本似乎被加载。 – Luka

哎呀，我不知道你是同一个人。当我在一个小时内上班时，我会更多地考虑它。 – LStarky

您是否尝试实现回调函数？这绝对是最干净的解决方案，不需要上面的未定义检查。我会尽力给出更完整的解决方案。 – LStarky

如何使用BingMaps和Aurelia

相关推荐