在运行时加载 BingMaps API

Question

我正在尝试在我的 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 is not a function

所以我又尝试了一次：

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

load_bing_map();

但是我又运行出错了：

jQuery.Deferred exception: n is null 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>

我只能在运行时做。

Answer 1

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

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

在运行时加载 BingMaps API

Load BingMaps API on runtime

javascript

jquery

bing-maps