Bing Maps在Thingsboard组件中无法每次成功加载的问题求助

我是Javascript和Thingsboard新手，尝试在Thingsboard组件中集成Bing Maps，遇到组件并非每次都能成功加载的问题。以下是我的JS代码片段：

var map;
$.getScript(
'https://www.bing.com/maps/sdkrelease/mapcontrol'
);

function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {    
    credentials: 'Replaced with bing api access token'    
});    
  console.log(Microsoft);   
}

self.onInit = function() {   
  GetMap();    
}

我尝试离线运行相同代码时，Bing Maps每次都能正常加载。请问我在Thingsboard上实现Bing Maps API的方式是否有误？有人能提示错误可能出在哪里吗？

问题原因与解决方案 #

问题出在异步加载的时序问题：$.getScript是异步加载脚本的，你在self.onInit中直接调用GetMap时，Bing Maps的脚本可能还未加载完成，此时全局的Microsoft对象还未定义，导致地图初始化失败。离线环境下脚本可能被缓存，加载速度更快，所以不会出现问题，但在Thingsboard的在线环境中，网络延迟会导致脚本加载滞后于初始化调用。

修改代码，确保脚本加载完成后再执行地图初始化：

var map;

function GetMap() {
  map = new Microsoft.Maps.Map('#myMap', {    
    credentials: '你的Bing API访问令牌'    
  });    
  console.log(Microsoft);   
}

self.onInit = function() {   
  // 利用getScript的回调确保脚本加载完成后再初始化地图
  $.getScript('https://www.bing.com/maps/sdkrelease/mapcontrol')
    .done(function() {
      GetMap();
    })
    .fail(function() {
      console.error('Bing Maps脚本加载失败，请检查网络或API地址');
    });
}

你也可以添加额外的容错处理，比如在脚本加载超时后重试，不过优先保证回调触发后再执行初始化，就能解决大部分加载不稳定的问题。

内容的提问来源于stack exchange，提问作者srihari-bg