推荐通过 angular 依赖注入机制封装地图实例为 @injectable({ providedin: 'root' }) 服务，采用懒加载 + promise 缓存模式延迟初始化 sdk，避免挂载到 window；组件中在 ngafterviewinit 调用 getmap() 获取实例，配合 ngondestroy 销毁资源，确保单例、可测、可维护。

在 Angular 应用中，不推荐直接将第三方库（如高德地图、百度地图、Leaflet 或 Mapbox 的实例）挂载到 window 或全局变量上以实现“全局访问”。更合理、可维护、可测试的方式是：通过 Angular 的依赖注入（DI）机制，将地图实例封装为可注入的服务，并利用 @Injectable({ providedIn: 'root' }) 实现真正意义上的“全局单例访问”。

1. 创建地图服务并延迟初始化

地图 SDK 通常需在 DOM 就绪后加载（如 AMap 需要 script 标签），且初始化耗时。应避免在服务构造函数中直接 new 实例，而采用懒加载 + Promise 缓存模式：

• 定义一个 MapService，使用 @Injectable({ providedIn: 'root' })
• 内部维护一个私有 mapInstance$（Promise<amap.map></amap.map> 或 Subject<amap.map></amap.map>），首次调用 getMap() 时动态加载 SDK 脚本（可用 loadScript() 辅助函数）
• 脚本加载完成后，执行 new AMap.Map(...) 并 resolve 实例
• 后续调用直接返回已缓存的 Promise，保证单例和并发安全

2. 在组件或指令中安全注入和使用

任何需要地图功能的组件，只需在构造函数中声明 private mapService: MapService 即可：

• 在 ngAfterViewInit 中调用 this.mapService.getMap().then(map => { /* 绑定容器、添加标记等 */ })
• 避免在 ngOnInit 中操作 DOM 容器（此时视图可能未渲染）
• 若需响应式集成（如坐标随输入变化），可将 mapInstance$ 设为 Observable<amap.map></amap.map>，配合 async 管道或 takeUntil 销毁

3. 支持多地图实例与配置隔离

若应用需多个独立地图（如首页地图 + 详情页地图），可扩展服务设计：

• 导出 MAP_CONFIG InjectionToken，允许按场景提供不同配置（{ key: 'xxx', version: '2.0', plugins: [...] }）
• 在模块级或组件级通过 providers: [{ provide: MAP_CONFIG, useValue: {...} }] 覆盖默认配置
• 服务内部根据 token 值区分初始化逻辑，避免全局污染

4. 清理资源与生命周期协同

地图实例占用内存和事件监听器，必须显式销毁：

• 在服务中暴露 destroyMap() 方法，调用 map.destroy()（如 AMap）或 map.remove()（如 Leaflet）
• 在组件 ngOnDestroy 中调用该方法；若服务本身为全局单例，可约定“仅当应用退出或路由跳转至无地图页面时销毁”
• 避免在服务构造函数中自动初始化，防止无用实例长期驻留

不复杂但容易忽略：Inject 不是魔法，它解决的是“谁来创建、何时创建、如何复用”的问题。把地图当作一个需要受控生命周期的外部资源来建模，比强行塞进全局变量更健壮、更易调试、也更符合 Angular 的设计哲学。