推荐通过 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>或Subject<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>，配合async管道或takeUntil销毁
3. 支持多地图实例与配置隔离
若应用需多个独立地图（如首页地图 + 详情页地图），可扩展服务设计：
- 导出
MAP_CONFIGInjectionToken，允许按场景提供不同配置（{ key: 'xxx', version: '2.0', plugins: [...] }） - 在模块级或组件级通过
providers: [{ provide: MAP_CONFIG, useValue: {...} }]覆盖默认配置 - 服务内部根据 token 值区分初始化逻辑，避免全局污染
4. 清理资源与生命周期协同
地图实例占用内存和事件监听器，必须显式销毁：
- 在服务中暴露
destroyMap()方法，调用map.destroy()（如 AMap）或map.remove()（如 Leaflet） - 在组件
ngOnDestroy中调用该方法；若服务本身为全局单例，可约定“仅当应用退出或路由跳转至无地图页面时销毁” - 避免在服务构造函数中自动初始化，防止无用实例长期驻留
不复杂但容易忽略：Inject 不是魔法，它解决的是“谁来创建、何时创建、如何复用”的问题。把地图当作一个需要受控生命周期的外部资源来建模，比强行塞进全局变量更健壮、更易调试、也更符合 Angular 的设计哲学。
