Angular 5 中的 Bing 地图集成 [英] Bing map integration in Angular 5

问题描述

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

I tried to implement bing map in angular 4. I used angular-map package but it throws Microsoft reference issue. Please see the below code and share the example

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',
          });
        }
      }   
    }
}

推荐答案

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

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

This needs to be imports to get access of Microsoft reference.

这篇关于Angular 5 中的 Bing 地图集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！