如何等待BingMaps在Aurelia中加载 [英] How to wait BingMaps to be loaded in Aurelia
问题描述
我所做的是将BingMaps脚本标记添加到索引页面的Head部分。像这样：
< head>
< meta charset =utf-8>
< script type ='text / javascript'src ='http：//www.bing.com/api/maps/mapcontrol？branch = release'>< / script>
< / head>
然后我有一个Map模板和Map控制器，如下所示：
map.html
< template>
< div id ='mainMap'style ='width：100vw; height：100vh;'>< / div>
< / template>
map.ts
导出类地图
{
map：Microsoft.Maps.Map;
$ b $ attach（）{
this.map = new Microsoft.Maps.Map（'＃mainMap'，{credentials：myKey}）;
this.map.setView（{center：new Microsoft.Maps.Location（45.093,14.114），zoom：15}）;
$ b现在我使用Aurelia Typescript WebPack Skeleton for我的应用程序。
如果我运行该应用程序并单击地图菜单链接，我创建了所有正确的作品以及我显示的地图。
但如果我在浏览器中刷新刷新，Aurelia会抛出异常：
$ b
未处理的拒绝TypeError：无法读取属性'prototype'在k的空
（ https：// www。 bing.com/mapspreview/sdk/mapcontrol?branch=release:11:7096 ）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 t [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 ）
在新的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 < a>）
在Controller.attached
就像Map脚本在Map控制器中的Attached方法运行之前尚未加载。
如何告诉Aurelia在运行Attached方法之前等待地图脚本加载？
解决方案您有两个选择。第一种方法是在地图脚本URL中添加一个回调参数，并在地图脚本加载完成后传入函数的名称进行调用。例如：
< script type ='text / javascript'src ='http：//www.bing.com/ api / maps / mapcontrol？callback = LoadMap'async defer>< / script>
请注意，您不需要声明您希望发布分支，即默认分支地图控制负载。
第二个选项有点复杂，但帮助了其他不想使用回调方法的人。此方法由监视Microsoft.Maps名称空间并等待它可用。这可以使用超时完成。例如：
函数LoadMap（）{
if（typeof Microsoft！== undefined&& typeof Microsoft .Maps！==未定义）{
//可用Map API添加您的地图加载代码。
} else {
setTimeout（LoadMap，100）;
}
}
I am trying to use BingMaps in an Aurelia SPA.
What I've done is to add BingMaps script tag to the Head section of the Index page. 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.html
<template>
<div id='mainMap' style='width: 100vw; height: 100vh;'></div>
</template>
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.
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:
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 t.l [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 t.l [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.
How can I tell Aurelia to wait for the maps script to be loaded before running the Attached method?
解决方案 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. 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.
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. 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);
}
}
这篇关于如何等待BingMaps在Aurelia中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
