BingMap - 获取空错误的原型

Question

我已经搜索了 google 和 Whosebug，但找不到此问题的 solution。我正在这样加载 map，在我的 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

在地图脚本 URL 中，您正在使用另一个回调函数来加载地图。（loadScenario 与 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 函数加载到页面之前加载地图。

或者，您可能会发现此代码示例很有用：https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Experimental/Map_WithAngular1.html

Answer 2

您似乎只在您的视图中生成 static map，在这种情况下加载 Bing 地图 API (http://www.bing.com/api/maps/mapcontrol) 和初始化地图控件 (GetMap function) 可以省略。

您收到错误的原因：

TypeError: Cannot read property 'prototype' of null

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

<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

似乎 BING MAP API 8 的参考顺序有一些问题，将尝试向 Rick 报告。

不工作：

<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>

但是...这打破了纪元，而不是 Angular 的加载方式。所以回到绘图板。

Answer 4

用 "setTimeout":

包装 "loadMap" 方法后，问题解决了

HTML

<div class="bing-map-container">
  <div id='printoutPanel'></div>
  <div #bingMap id="myMap" style='width: 100vw; height: 100vh;'></div>
</div>

组件

import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {BingMapService} from './bing-map.service';
import {Subscription} from "rxjs";

@Component({
  moduleId: module.id,
  selector: 'bing-map',
  styleUrls: ['./bing-map.component.css'],
  templateUrl: './bing-map.component.html'
})
export class BingMapComponent implements OnInit, OnDestroy {
  @ViewChild('bingMap') bingMap: any;
  serviceSubject: Subscription;

  constructor(
    private bingMapService: BingMapService
  ) {}

  loadMap() {
    const map = new Microsoft.Maps.Map(this.bingMap.nativeElement, {});
  }

  ngOnInit() {
    this.serviceSubject = this.bingMapService.injectionSubject().subscribe((loaded) => {
      if (loaded) {
        window.setTimeout(() => {
          this.loadMap();
        });
      }
    });

    this.bingMapService.injectBingMapMainScript();
  }

  ngOnDestroy() {
    if (this.serviceSubject) {
      this.serviceSubject.unsubscribe();
    }
  }
}

服务

import {Observable, Subject} from 'rxjs';
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable({
  providedIn: 'root'
})
export class BingMapService {
  private subject = new Subject<any>();

  constructor(
    private http: Http,
  ) {}

  injectBingMapMainScript() {
    let script = document.createElement('script');
    script.src = 'https://www.bing.com/api/maps/mapcontrol?key=[YourKey]';
    script.async = true;

    document.body.appendChild(script);

    script.onload = () => {
      this.subject.next(true);
    };
  }

  injectionSubject(): Observable<any> {
    return this.subject.asObservable();
  }
}

BingMap - 获取空错误的原型

BingMap - getting prototype of null error

javascript

bing-maps

angularjs