AngularJS 无法加载 Bing 地图

Question

我正在使用 AngularJS 显示 Bing 地图，但错误显示“TypeError：无法读取 null 的属性‘原型’”。请看下面。

在我的 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>

在我的 JavaScript 文件中有：

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

function showMap() {         
    var key = "######";

    var map = new Microsoft.Maps.Map('#myMap', {
        credentials: key,
        zoom: 3
    });
}

更新：

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();
   });
});

Answer 1

显然，由于 Bing 地图库在地图初始化后尚未准备就绪，因此会发生此错误。

没有发生错误，是不是showMap函数在延迟后被调用（假设此时Bing地图库已经加载），例如：

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

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

注册必应地图库准备好后需要触发的函数，如下所示：

Microsoft.Maps.CallbackOnLoad = "initMap";

并声明initMap一个全局函数：

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

演示

angular.module('mapApp', []);
    angular
        .module('mapApp')
        .controller('MapController', MapController);

    function MapController($scope, $window) {

        $window.initMap = function () {
            let map = new window.Microsoft.Maps.Map(
                document.getElementById('myMap'), {
                    credentials: 'AjwUEXFZA8SMyy8CaJj59vJKVDoWohNXVFz_uGyHlT8N40Jgr-zrhvcxbTNRyDqn'
                });
            map.setView({
                zoom: 6,
                center: new Microsoft.Maps.Location(52.406978607177734, -1.5077600479125977)
            });
        }

        Microsoft.Maps.CallbackOnLoad = "initMap";
    }

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<div ng-app="mapApp" ng-controller="MapController">
    <div id="myMap" style="width:600px;height:400px;"></div>
</div>