bing map APi angularjs 1.6.4 错误答案

【问题标题】：bing map APi angularjs 1.6.4 Errorbing map APi angularjs 1.6.4 错误
【发布时间】：2017-07-30 03:05:12
【问题描述】：

我正在挠头，试图弄清楚将 bing map api 集成到 angularjs 1.6.4 。任何人都可以帮助...？。

这是我的html

https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer>

以下代码在 Body 标签内。

我的角度控制器代码如下

$scope.map = null;

    function loadMapScenario() {

        console.log('Load scenario called');

        var map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), {
            credentials: 'Ao-Rs8NHwtlEI5piXQCcxMZrTfAt9zbg7a-8hB4PLAcc0eo5nZPN84aY16noJGKS',
            center: new Microsoft.Maps.Location(41.264675, -96.041927),
            zoom: 4
        });
    }

    //$scope.map = null;
    $scope.init = function () {


        console.log('Map init');
        $scope.map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), {
            credentials: 'api Key',
            center: new Microsoft.Maps.Location(41.264675, -96.041927),
            zoom: 4
        });
    };

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

问题：

我收到以下错误

Uncaught ReferenceError: Microsoft is not defined

和

未捕获的 TypeError: window[Microsoft.Maps.CallbackOnLoad] 不是函数

知道这段代码有什么问题吗？

感谢您的帮助

【问题讨论】：

标签： jquery angularjs callback bing-api

【解决方案1】：

此错误Uncaught ReferenceError: Microsoft is not defined 在运行代码之前您没有加载 Bing 地图 API。

查看Bing API 文档，您似乎需要在window 对象上定义一个回调函数，该函数将在脚本加载时调用。

【讨论】：

【解决方案2】：

编辑：我重新检查了我的工作。我正在使用 loadMapScenario 函数在我的控制器中再次加载它。 GitHub 示例 here 还将地图加载到控制器内。目前，回调似乎不适用于 Angular 1。但是，您应该能够加载调用。我确实认为将 mapcontrol 标记放在脚本文件之后会有所帮助。请参阅 Github 示例，该示例确实有效。

编辑 2：我设法破解了一些绝对不符合 Angular 最佳实践的东西。在我的脚本标签中，我定义了回调函数 mapLoaded。在控制器定义之外和之前，我定义了以下内容：

 var mapReady = false;

    function mapLoaded() {
       mapReady = true;
    }

然后在控制器中，我有一个简单的监视函数，它等待变量为真或指定的时间过去。这很丑陋，但是为了解决这个主题的另一个答案，我看到很多人说你可以将此函数添加到窗口对象，但没有有效的代码，我已经尝试过任何一种方式样本。

在下面的答案删除中删除以前的错误代码以缩短帖子并保持相关性而不会完全丢失错误答案。

看起来你的 bing 脚本标签在某种程度上是错误的——这就是会产生“微软未定义”错误的原因。此外，如果您在脚本标记中定义了回调函数，则不需要在 $scope.init 中使用它，也不需要准备好文档。

<script src="js/app.js"></script>
<script type="text/javascript" src="//www.bing.com/api/maps/mapcontrol?callback=AsyncMapLoad" async defer></script>

我更改了回调名称，但这是从一些工作角度代码直接复制和粘贴以加载地图和自动建议功能。

app.js 的相关部分如下所示（出于我自己的原因，我已将一些地图代码提取到服务中，因此第一个函数在第二个函数中引用的服务中，该函数在引用的控制器中服务：

【讨论】：