在运行时加载 BingMaps API答案

【问题标题】：Load BingMaps API on runtime在运行时加载 BingMaps API
【发布时间】：2018-02-02 07:29:49
【问题描述】：

我试图在我的 JavaScript 文件运行期间加载 Bing 地图 API。这是我到目前为止所得到的，基于this。

var bingmap_link = 'https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario';
$.when(
  $.getScript(bingmap_link),
  $.Deferred(function( deferred ){
    $( deferred.resolve );
  })
)
.done(function() {
  console.log("done");
  load_bing_map();
});

但是我会得到以下错误

TypeError：Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest 不是一个函数

于是我又尝试了一次：

$('head').append('<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario" async defer></script>');

load_bing_map();

但我又在错误中运行：

jQuery.Deferred 异常：n 为空 k@https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario:12:7416

在这两种情况下，load_bing_map() 函数如下所示。

function load_bing_map() {
  var map = new Microsoft.Maps.Map('#mymap', {
    credentials: 'MyKey'
  });
}

代码在$().ready 触发后执行。

我错过了什么？

最后我不需要像这样的解决方案

<head>
  <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
</heady>

我只能在运行时这样做。

【问题讨论】：

标签： javascript jquery bing-maps

【解决方案1】：

您在地图脚本 URL 中指定了一个回调函数，但在您的代码中没有具有该名称的函数。这导致您看到的错误。此外，您拥有的代码不会按原样工作。地图控件异步加载一堆资源。这样一来，就可以达到你的done函数了，只加载了初始的javascript文件，没有其他资源，所以地图API还不可用。下面是一个代码示例，展示了如何延迟加载地图 API：https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Map/Lazy%20Loading%20the%20Map.html

您可以在这里试用：http://bingmapsv8samples.azurewebsites.net/#Lazy%20Loading%20the%20Map

【讨论】：

完美运行。谢谢:)