BingMap -获得零错误的原型

Question

我搜索了google和stackoverflow，但是找不到一个solution来解决这个问题。我正在像这样在我的view中加载这个view。

<img
      ng-src='https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/
              {{Latitude.__text}},{{Longitude.__text}}/12?mapSize=77,120&amp;
                           key={{Key}}'></img>

下面是如何在index.html中加载它

<script type='text/javascript' src='https://www.bing.com/mapspreview/sdkrelease/mapcontrol?callback=loadMapScenario' async defer></script>
<script type='text/javascript' src='app/services/bing.js?' async defer></script>

下面是我的controller代码，在这里我试图调用maps。

function GetMap() {
    if (typeof Microsoft !== undefined && typeof Microsoft.Maps !== undefined &&
        Microsoft.Maps.Map !== null) {
        //Map API available add your map load code.
        angular.element(document).ready(function() {
            map = new Microsoft.Maps.Map(document.getElementById('myMapL'), {
                credentials: Key,
                mapTypeId: "r",
                zoom: 4
            });
        });
    } else {
        setTimeout(GetMap(), 100);
    }
}

我得到了以下错误：

TypeError: Cannot read property 'prototype' of null
    at k (bing.js:11)
    at h (bing.js:11)
    at e (bing.js:11)
    at t.l [as instance] (bing.js:11)
    at h (bing.js:11)
    at e (bing.js:11)
    at t.l [as instance] (bing.js:11)
    at new Microsoft.Maps.Map (bing.js:13)
    at HTMLDocument.<anonymous> (file-location.js:121)
    at j (jquery-1.11.0.min.js:2)

Answer 1

在map脚本URL中，您正在使用一个不同的回调函数来加载映射。(loadScenario vs GetMap)。而且，看起来您使用的是重定向URL，而不是文档化的地图脚本URL (这可能会在将来中断)。尝试将映射脚本URL更改为：

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=GetMap' async defer></script>

不知道你的应用程序中有什么bing.js。假设这里是您要映射的加载代码的位置。您将希望在映射脚本之前加载它，否则映射脚本可能会在代码加载之前加载，因此在将GetMap函数加载到页面之前尝试加载映射。

或者，您可能会发现这个代码示例很有用：WithAngular1.html

Answer 2

似乎您只是在视图中生成一个静态地图，在这种情况下，可以省略必应映射API (http://www.bing.com/api/maps/mapcontrol)和初始化映射控制(GetMap function)的加载。

您得到错误的原因：

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

很可能是因为您的视图中缺少map容器声明。

<div id="myMapL"></div>

示例

​

var app = angular.module("myApp", []);
app.controller("bingMapsCtrl", function ($scope) {
 
    $scope.Key = "As1l7HRtrpkXzjXozp3M2ufUTDvj16b2MHlpscQmHJEtxYFZWqwyccSx7I5XXEW_";

});

 <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<div ng-app="myApp" ng-controller="bingMapsCtrl" ng-cloak>
        <!--div id="myMapL"></div-->
        <img
      ng-src='http://dev.virtualearth.net/REST/V1/Imagery/Map/Road/Bellevue%20Washington?mapLayer=TrafficFlow&amp;key={{Key}}'></img>
    </div>

​

Answer 3

似乎必应地图API 8有一些问题与参考顺序，将试图向瑞克报告。

不工作：

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>

这在以下几个方面都失败了：

mapcontrol:11 Uncaught TypeError: Cannot read property 'prototype' of null
    at k (mapcontrol:11)
    at n.h [as create] (mapcontrol:11)
    at e (mapcontrol:11)
    at t.l [as instance] (mapcontrol:11)
    at n.h [as create] (mapcontrol:11)
    at e (mapcontrol:11)
    at t.l [as instance] (mapcontrol:11)
    at new Microsoft.Maps.Map (mapcontrol:13)
    at ChildScope.$scope.init (maptest.html:92)
    at HTMLDocument.<anonymous> (maptest.html:99)

确实有效：

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

但是..。这打破了时代，而不是怎样的角度被加载。所以回到画板上。