Question

我搜索过Google和stackoverflow，但找不到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 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函数加载到页面之前加载映射。

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

Answer 2

似乎您只在视图中生成static map，在这种情况下加载 Bing Maps API （http://www.bing.com/api/maps/mapcontrol）并初始化地图控件（{{1 }}）可以省略。

您收到错误的原因：

TypeError：无法读取属性＆＃39;原型＆＃39;为null

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

GetMap function

示例

＆＃13;
＆＃13;
<div id="myMapL"></div>
＆＃13;
var app = angular.module("myApp", []); app.controller("bingMapsCtrl", function ($scope) { $scope.Key = "As1l7HRtrpkXzjXozp3M2ufUTDvj16b2MHlpscQmHJEtxYFZWqwyccSx7I5XXEW_"; });
＆＃13;
＆＃13;
＆＃13;

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 - 获取null错误的原型

4 个答案: