Angular 10中mapboxgl.NavigationControl控件无法生效问题求助

下面是几个常见的排查和修复方案：

1. 确保地图容器有明确的宽高样式 #

NavigationControl依赖地图容器的尺寸，如果容器没有设置宽高，控件会因无显示空间而隐藏。在mini-map.component.sass中添加容器样式：

#miniMapa
  width: 100%
  height: 400px

或者直接在模板中设置：

<div #miniMapa style="width: 100%; height: 400px;"></div>

2. 地图加载完成后再添加控件 #

地图初始化是异步操作，直接在创建后添加控件可能因地图未完全加载导致挂载失败，改为监听load事件后添加：

ngAfterViewInit(): void {
  mapboxgl.accessToken = '你的Mapbox访问令牌';
  this.mapa = new mapboxgl.Map({
    container: this.divmapa.nativeElement,
    style: "mapbox://styles/mapbox/streets-v11",
    center: [-72.25323448337556, 11.373452774112943],
    zoom: 4,
  });

  this.mapa.on('load', () => {
    this.mapa.addControl(new mapboxgl.NavigationControl());
  });
}

注意将局部变量const mapa改为赋值给类成员this.mapa，方便后续操作。

3. 匹配Mapbox GL JS与Angular 10的版本兼容性 #

Angular 10属于旧版本，建议使用兼容的Mapbox GL JS稳定版（如v1.13.0），过高版本可能与Angular 10的构建工具冲突。修改package.json依赖：

"mapbox-gl": "^1.13.0"

执行npm install重新安装依赖。

4. 全局导入Mapbox样式 #

组件内局部导入样式可能受Angular样式封装影响，改为在angular.json的styles数组中全局导入：

"styles": [
  "src/styles.sass",
  "node_modules/mapbox-gl/dist/mapbox-gl.css"
]

5. 确认Mapbox访问令牌已配置 #

未配置令牌会导致地图无法加载，控件自然不显示。可将令牌存放在environment.ts中统一管理：

// environment.ts
export const environment = {
  production: false,
  mapboxToken: '你的Mapbox访问令牌'
};

在组件中导入使用：

import { environment } from '../../environments/environment';

// ...
ngAfterViewInit(): void {
  mapboxgl.accessToken = environment.mapboxToken;
  // 地图初始化逻辑
}

内容的提问来源于stack exchange，提问作者Pedro Miguel Pimienta Morales