我正在为我的应用程序使用aurelia skeleton typescript网页包模板。
我想把bingmaps添加到一个页面，并能够添加图钉等。
到目前为止我已经做到了：
index.html-我添加了一个脚本标记，用于从cdn加载映射
<head>
...
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>
</head>
然后我添加了一个这样的模板：
地图.html
<template>
<div id='mainMap' style='width: 100vw; height: 100vh;'></div>
</template>
然后我有地图控制器：
地图.ts
export class Map {
private map: Microsoft.Map.Map;
attached() {
this.map = new Microsoft.Maps.Map('mainMap', { credentials:'mycredentials - omitted'});
...
}
}
现在，如果我启动应用程序，将显示欢迎屏幕（从框架）。然后我点击“地图”菜单链接，地图页面显示地图已完全加载。
但如果我在浏览器中单击“刷新”（F5或CTRL+F5），地图将不再显示，控制台中将显示一个错误：
js:1546未处理的拒绝类型错误：无法读取空的属性“prototype”
在K（https://www.bing.com/mapspreview/sdk/mapcontrol:11:7096）
在H（https://www.bing.com/mapspreview/sdk/mapcontrol:11:6285）
在E（https://www.bing.com/mapspreview/sdk/mapcontrol:11:1106）
在T.L[作为实例]（https://www.bing.com/mapspreview/sdk/mapcontrol:11:161）
在H（https://www.bing.com/mapspreview/sdk/mapcontrol:11:6042）
在E（https://www.bing.com/mapspreview/sdk/mapcontrol:11:1106）
在T.L[作为实例]（https://www.bing.com/mapspreview/sdk/mapcontrol:11:161）
在新的microsoft.maps.map（https://www.bing.com/mapspreview/sdk/mapcontrol:13:4304）
附地图（http://localhost:9000/app.bundle.js:31267:20）
在控制器上。连接（http://localhost:9000/aurelia.bundle.js:6438:22）
在view.attached（http://localhost:9000/aurelia.bundle.js:4524:23）
位于viewslot.attached（http://localhost:9000/aurelia.bundle.js:4883:13）
在view.attached（http://localhost:9000/aurelia.bundle.js:4534:19）
位于viewslot.attached（http://localhost:9000/aurelia.bundle.js:4883:13）
在http://localhost:9000/aurelia.bundle.js:14717:28
此错误在试图在映射控制器的附加事件中实例化映射对象时引发。
为什么会这样，我该怎么解决？
请帮助
谢谢
最佳答案
解决这个问题的关键是使用API允许我们在脚本URL中指定的callback参数。为此，我创建了一个自定义元素。在最初加载模块时加载脚本。自定义元素的任何实例都将等待调用回调函数。我最初使用的是一个带有MutationObserver和数据属性的复杂设置，但在和Jeremy Danyow交谈之后，他指出，“允诺”回调将更简单地解决这个问题。这个简单的解决方案如下所示。
自定义元素目前除了获取地图的当前中心点之外，不提供任何与地图交互的api，但它是帮助您的一个好的起点。
必应地图
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>
关于typescript - 如何在Aurelia中使用BingMaps，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41162142/