Angular 4/5集成Bing地图遇Microsoft引用错误 求实现示例

Angular 5的集成思路和4差不多，但可以用更简洁的方式，这里给你两种选择：

方案一：手动加载脚本（无第三方依赖，推荐） #

1. 创建全局地图加载服务 #

// core/services/bing-maps-loader.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class BingMapsLoaderService {
  private loaded = false;
  private apiKey = 'YOUR_BING_MAPS_API_KEY';

  load(): Promise<void> {
    if (this.loaded) return Promise.resolve();

    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = `https://www.bing.com/api/maps/mapcontrol?key=${this.apiKey}`;
      script.onload = () => {
        this.loaded = true;
        resolve();
      };
      script.onerror = () => reject(new Error('Bing Maps加载失败'));
      document.head.appendChild(script);
    });
  }
}

2. 实现地图组件 #

// components/bing-map/bing-map.component.ts
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { BingMapsLoaderService } from '../../core/services/bing-maps-loader.service';

@Component({
  selector: 'app-bing-map',
  template: `<div #mapEl style="width: 100%; height: 600px;"></div>`
})
export class BingMapComponent implements OnInit {
  @ViewChild('mapEl') mapElement!: ElementRef;
  private map: any;

  constructor(private loader: BingMapsLoaderService) { }

  ngOnInit(): void {
    this.loader.load().then(() => {
      this.initMap();
    });
  }

  private initMap(): void {
    this.map = new Microsoft.Maps.Map(this.mapElement.nativeElement, {
      center: new Microsoft.Maps.Location(40.7128, -74.0060), // 纽约坐标
      zoom: 12,
      credentials: this.loader['apiKey']
    });

    // 加个标记示例，直观展示
    const pushpin = new Microsoft.Maps.Pushpin(this.map.getCenter(), {
      title: '测试标记',
      subTitle: 'Bing Maps Angular 5示例'
    });
    this.map.entities.push(pushpin);
  }
}

方案二：使用第三方库angular-bingmaps #

如果不想自己写加载逻辑，可以用社区维护的库：

1. 安装依赖 #

npm install angular-bingmaps --save

2. 在AppModule中导入模块 #

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BingMapsModule } from 'angular-bingmaps';

import { AppComponent } from './app.component';
import { BingMapComponent } from './components/bing-map/bing-map.component';

@NgModule({
  declarations: [AppComponent, BingMapComponent],
  imports: [
    BrowserModule,
    BingMapsModule.forRoot({
      key: 'YOUR_BING_MAPS_API_KEY'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 组件中直接使用 #

// bing-map.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-bing-map',
  template: `
    <bm-map [center]="center" [zoom]="10" style="width: 100%; height: 600px;">
      <bm-pushpin [location]="center" [title]="'洛杉矶测试点'"></bm-pushpin>
    </bm-map>
  `
})
export class BingMapComponent {
  center = { lat: 34.0522, lng: -118.2437 }; // 洛杉矶坐标
}

额外提示 #

• 一定要去Bing Maps开发者平台申请有效的API密钥，不然地图加载不出来
• Angular 5对应TypeScript版本是2.4.x到2.6.x，版本不兼容会有奇怪的错误
• 如果遇到TypeScript类型报错，可以安装类型定义：

npm install @types/bingmaps --save-dev

内容的提问来源于stack exchange，提问作者Amit Khese