Angular 5集成angular-maps Bing地图遇模块导入错误求助

首先，你遇到的Unexpected value '[object Object]' imported by the module 'MyModule'错误，大概率是重复配置导致的冲突：MapModule.forRootBing()方法本身已经为你注册了Bing地图相关的提供者（包括MapAPILoader），而你又在providers数组里手动添加了自定义的MapAPILoader提供者，这就造成了模块导入时的冲突。

针对当前angular-maps库的修复步骤： #

1. 移除重复的提供者配置
   删掉@NgModule中providers数组里的{ provide: MapAPILoader, deps: [], useFactory: MapServiceProviderFactory }这一行，因为MapModule.forRootBing()已经包含了默认的Bing地图加载器配置。

2. 通过forRootBing传递你的API配置
   如果需要自定义API密钥和分支，直接在forRootBing方法中传入配置对象即可，不需要自己写工厂函数：

   @NgModule({
     imports: [
       // 其他模块...
       MapModule.forRootBing({
         apiKey: "YOUR_BING_MAP_KEY",
         branch: "experimental"
       })
     ],
     // 移除手动添加的MapAPILoader提供者
     providers: [/* 其他必要提供者 */]
   })
   

3. 优化Microsoft命名空间的处理
   你之前用空导入解决Cannot find namespace 'Microsoft'的方式可以替代为更规范的类型配置：

   • 安装Bing Maps的类型定义：npm install @types/bingmaps --save-dev
   • 在tsconfig.json的compilerOptions里添加"types": ["bingmaps"]，这样TypeScript就能自动识别Microsoft命名空间，不需要额外的空导入。

Angular 5集成Bing地图的更优方案：直接使用原生JS API #

考虑到Angular 5属于较旧的版本，很多第三方地图库（包括你用的angular-maps）可能已经停止了对它的维护，直接使用Bing Maps原生JS API会更稳定、灵活：

1. 引入Bing Maps脚本
   在项目根目录的index.html中添加Bing Maps的CDN脚本（替换成你的API密钥）：

   <script type='text/javascript' 
           src='https://www.bing.com/api/maps/mapcontrol?key=YOUR_BING_MAP_KEY' 
           async defer>
   </script>
   

2. 创建地图组件
   新建一个组件来封装地图逻辑，示例代码如下：

   import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
   
   // 声明Microsoft命名空间，避免TypeScript报错
   declare var Microsoft: any;
   
   @Component({
     selector: 'app-bing-map',
     template: '<div #mapContainer style="width: 100%; height: 400px;"></div>'
   })
   export class BingMapComponent implements AfterViewInit {
     @ViewChild('mapContainer') mapContainer: ElementRef;
     private map: any;
   
     ngAfterViewInit(): void {
       // 确保Bing Maps脚本加载完成后初始化地图
       if (typeof Microsoft !== 'undefined') {
         this.initMap();
       } else {
         // 如果脚本加载延迟，监听加载完成事件
         window.addEventListener('load', () => this.initMap());
       }
     }
   
     private initMap(): void {
       this.map = new Microsoft.Maps.Map(this.mapContainer.nativeElement, {
         credentials: 'YOUR_BING_MAP_KEY',
         center: new Microsoft.Maps.Location(40.7128, -74.0060), // 纽约坐标示例
         zoom: 10
       });
   
       // 可以在这里添加标记、图层等其他地图操作
       const pushpin = new Microsoft.Maps.Pushpin(this.map.getCenter());
       this.map.entities.push(pushpin);
     }
   }
   

3. 在模块中声明组件
   将这个地图组件添加到你的NgModule的declarations数组中，就可以在其他组件中通过<app-bing-map></app-bing-map>标签使用了。

这种方式不需要依赖第三方库，完全由你控制地图的所有功能，适配Angular 5也不会有版本兼容问题。

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