如何等待BingMaps在Aurelia中加载
[英]How to wait BingMaps to be loaded in Aurelia
问题描述
I am trying to use BingMaps in an Aurelia SPA. 
我正在尝试在Aurelia SPA中使用BingMaps。 What I've done is to add BingMaps script tag to the Head section of the Index page. 我要做的是将BingMaps脚本标记添加到“索引”页面的“头部”部分。 like this: 像这样：
<head>
<meta charset="utf-8">
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release'></script>
</head>
Then I have a Map template and Map controller like this: 然后我有一个Map模板和Map控制器，如下所示：
map.html map.html
<template>
<div id='mainMap' style='width: 100vw; height: 100vh;'></div>
</template>
map.ts 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});
}
}
Now, I'm using Aurelia Typescript WebPack Skeleton for my application. 现在，我正在为我的应用程序使用Aurelia Typescript WebPack Skeleton。 If I Run the application and click the Map menu link I created all works correctly and the map i shown. 如果我运行该应用程序并单击“地图”菜单链接，则我创建的所有作品均可以正常运行，并且显示了我所显示的地图。 But if I pres Refresh in the browser Aurelia throws an exception: 但是，如果我在浏览器中提示刷新，则Aurelia会引发异常：
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 tl [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 tl [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
As like the Map script has not been loaded before the Attached method in the Map controller is run. 就像在Map控制器中的Attached方法运行之前尚未加载Map脚本。 How can I tell Aurelia to wait for the maps script to be loaded before running the Attached method? 在运行Attached方法之前，如何告诉Aurelia等待地图脚本加载？
2 个解决方案
解决方案1
1 已采纳 2016-12-01 17:30:13
You have two options. 您有两个选择。 The first is to add a callback parameter to the map script URL and pass in the name of a function to call when the map script has been loaded. 第一种是在地图脚本URL中添加回调参数，并传入要在加载地图脚本后调用的函数的名称。 For example: 例如：
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=LoadMap' async defer></script>
Note that you don't need to state you want the release branch, that is the default branch the map control loads. 请注意，您无需声明要使用release分支，即地图控件加载的默认分支。
The second option is a bit messier but has helped others who don't want to use the callback method. 第二个选项有点麻烦，但是它帮助了其他不想使用回调方法的人。 This method consists of monitoring the Microsoft.Maps namespace and waiting until it is available. 此方法包括监视Microsoft.Maps命名空间并等待其可用。 This can be done using timeouts. 可以使用超时来完成。 For example: 例如：
function LoadMap(){
if(typeof Microsoft !== undefined && typeof Microsoft.Maps !== undefined){
//Map API available add your map load code.
} else {
setTimeout(LoadMap, 100);
}
}
解决方案2
0 2018-09-24 13:49:19
well you need to wait for two events, the first is of course the load of the script, and then you need to wait for the microsoft script to load its API, for that purpose exists the callback parameter: I recommend using jquery for first task as it is easily transformed into a promise, ie: 好，您需要等待两个事件，首先当然是脚本的加载，然后您需要等待Microsoft脚本加载其API，为此目的，存在回调参数：我建议对第一个任务使用jquery因为它很容易变成承诺，即：
const _BING_MAPS_URL = 'https//www.bing.com/api/maps/mapcontrol?';
const _DEFAULT_CONFIG = $.params({
key: 'yourkey',
callback: 'globalScopedCallback'
});
loadBingMaps() {
const callbackInvoked = new Promise((resolve) => {
window.globalScopedCallback = resolve;
});
const scriptLoaded = new Promise((resolve, reject) => {
$.getScript(_BING_MAPS_URL + _DEFAULT_CONFIG).done(resolve).fail(reject);
});
// You can add here more promises loading modules, and anything you need.
return Promise.all([callbackInvoked, scriptLoaded]);
}
// Now you are sure everything is loaded
loadBingMaps().then(doYourAwesomeStuff);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.