Bing 地图集成 Angular 5

Question

我试图在 angular 4 中实现 bing 地图。我使用了 angular-map 包，但它引发了 Microsoft 参考问题。请查看以下代码并分享示例

import { Component,OnInit, ViewChild } from '@angular/core';
import { BingMapsLoader } from '../../shared/services/map-loader-service';

@Component({
  selector: 'pm-map',
  template: `
  <app-bing-map *ngIf='mapReady'></app-bing-map>`
})

export class DeviceMapComponent implements OnInit{
  mapReady = false;
      constructor() {
          BingMapsLoader.load()
              .then(res => {
                  console.log('BingMapsLoader.load.then', res);
                  this.mapReady = true;
          });
      }
      ngOnInit() {
        if (typeof Microsoft !== 'undefined') {
            console.log('BingMapComponent.ngOnInit');
            this.map = new Microsoft.Maps.Map(document.getElementById('mapId'),{
              credentials: 'Your Bing Maps Key Here',
          });
        }
      }   
    }
}

Answer 1

import { } from "bingmaps/scripts/MicrosoftMaps/Microsoft.Maps.All"

这需要导入才能访问 Microsoft 参考。

Bing 地图集成 Angular 5

Bing map integration in Angular 5

bing-maps

angular5