使用 Angular v1 的 Bing 地图 v8答案

【问题标题】：Bing Maps v8 using Angular v1使用 Angular v1 的 Bing 地图 v8
【发布时间】：2017-02-21 09:25:30
【问题描述】：

我正在尝试将我的 Bing Maps v7 升级到 v8，根据文档，我应该能够交换 url，它可以解决可能的小问题。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src='https://www.bing.com/api/maps/mapcontrol?branch=release'></script>
<body ng-app="myApp">

<div ng-controller="bingCtrl" ng-init="init()" ng-cloak>
    <div id="mapDiv"></div>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("bingCtrl", function($scope) {
    $scope.map = null;
    $scope.init = function() {
          $scope.map = new Microsoft.Maps.Map(document.getElementById('mapDiv'));
    };
});
</script>

</body>
</html>

我删除了所有代码以查看是否可以隔离问题，并且可以使用上面的代码。我收到以下错误。任何想法为什么这不起作用？

TypeError: 无法读取 null 的属性“原型”

【问题讨论】：

标签： angularjs bing-maps

【解决方案1】：

当通过ng-init 初始化地图时，Bing Maps API 似乎还没有准备好。为保证 Bing 地图库已加载，您可以使用 ready 事件。

解决方案

将ng-init="init()" 替换为：

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

演示：plunker

【讨论】：

你能帮我解决这个问题吗....stackoverflow.com/questions/43162044/…

【解决方案2】：

换出 URL 仅适用于某些应用程序，而不是所有应用程序。这不是一个标准的应用程序。

对此进行调查，您的 Angular 代码似乎是在 Bing 地图代码完全加载之前触发的。因此，地图 API 的某些部分尚未定义，并且遇到了空引用。老实说，当您使用 v7 时，这段代码可能无法 100% 工作。它可能第一次失败，然后一旦地图控件被缓存，就可以工作。

有几个人一直在使用 Bing Maps V8 和 Angular 2，这是我遇到的第一个使用 Angular 1 的应用程序。这是你的应用程序的修改版本，但它有点违背了使用 Angular 的目的。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src='https://www.bing.com/api/maps/mapcontrol?branch=release'></script>
<body ng-app="myApp">

<div ng-controller="bingCtrl" ng-init="init()" ng-cloak>
    <div id="mapDiv"></div>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("bingCtrl", function($scope) {
    $scope.map = null;
    $scope.init = function() {     
        //Try loading the map every 100ms until it works.
        var interval = setInterval(function(){
            try{
                $scope.map = new Microsoft.Maps.Map(document.getElementById('mapDiv'));
                clearInterval(interval);
             }catch(e){
             }
         }, 100);
    };  
});
</script>

</body>
</html>

以下是开发人员使用 Bing Maps V8 和 Angular 2 的一些帖子：

How to add Bing Maps v8 to Angular 2.0?

https://github.com/youjustgo/ng2-bingmaps

我确信有更好的方法来做到这一点。开发团队也会对此进行调查。

【讨论】：

我从来没有遇到过 V7 的这些问题（缓存与不缓存），除非绝对需要升级到 Angular V2，否则我宁愿不必切换所有内容。
我使用 V7 尝试了您的代码并清除了我的缓存。该错误发生在某些较旧的浏览器中。新的浏览器似乎可以更好地处理它。也就是说，正如我上面提到的，我会让开发团队为 V8 研究这个。
@rbrundritt：你能帮我解决这个问题吗...stackoverflow.com/questions/43162044/…