Javascript AngularJS无法加载Bing地图

我使用AngularJS显示Bing地图，但错误是“TypeError:无法读取null的属性'prototype'。请看下面

在my Razor视图中，文件具有以下内容：

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="~/lib/angular/angular.min.js"></script>
<script src="~/js/Site.js"></script>
----
----
--
<div ng-app="myDisplayItems">
    <div ng-controller="myDisplayItemsController">
        <div id="myMap"></div>
    </div>
</div>

更新：

var displayItems = angular.module("myDisplayItems", []);
displayItems.controller("myDisplayItemsController", function myDisplayItemsController($scope) {
   $scope.map = null;
   $scope.init = function () {
         $scope.map = showMap();
   };

   angular.element(document).ready(function () {
         $scope.init();
   });
});

---

显然，这个错误是因为Bing地图库在地图初始化后还没有准备好

没有错误发生，is

showMap

函数在延迟一段时间后被调用（假设Bing Maps库当时已加载），例如：

$timeout(function() { $scope.initMap()}, 2000); 

但我会提出以下解决方案：

注册Bing地图库准备就绪后需要触发的功能，如下所示：

Microsoft.Maps.CallbackOnLoad = "initMap";

并声明

initMap

全局函数：

$window.showMap = function () {
   //...
}

演示

angular.module（'mapApp'，[]）；
有棱角的
.module（'mapApp'））
.controller（“地图控制器”，地图控制器）；
函数映射控制器（$scope$window）{
$window.initMap=函数（）{
让map=new window.Microsoft.Maps.map(
document.getElementById（'myMap'）{
凭证：“AjwUEXFZA8SMyy8CaJj59vJKVDoWohNXVFz_uGyHlT8N40Jgr-zrhvcxbTNRyDqn”
});
map.setView({
缩放：6，
中心：新Microsoft.Maps.Location（52.406978607177734，-1.5077600479125977）
});
}
Microsoft.Maps.CallbackOnLoad=“initMap”；
}

感谢您的回复。我需要一段时间才能理解你的意思，因为我还在学习JavaScript、Angular、Bing地图和MVC概念。按照你的建议，我能够显示地图。下一阶段将使用$http调用从MS SQL Server数据库获取经度和纬度。

$window.showMap = function () {
   //...
}