Mapbox Gl JS CSS缺失致地图无法加载 求助

你的问题核心很明确：浏览器提示缺少Mapbox GL JS的CSS文件，这是Mapbox地图正常渲染的必要依赖——哪怕代码逻辑和编译都没问题，没有样式文件地图也无法正常显示。下面是针对Angular项目的具体解决方案：

1. 引入Mapbox GL JS CSS文件 #

你有两种可靠的方式引入样式：

方式一：通过npm本地引入 #

如果你已经通过npm安装了mapbox-gl（从你的代码看应该已经完成这一步），直接在angular.json文件的styles数组中添加CSS路径：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/mapbox-gl/dist/mapbox-gl.css" // 添加这一行
            ]
          }
        }
      }
    }
  }
}

添加后重启Angular开发服务器，让配置生效。

方式二：通过CDN引入 #

直接在项目根目录的index.html中添加CDN链接（版本号可以根据你使用的mapbox-gl版本调整）：

<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />

2. 确保地图容器有正确的尺寸 #

地图容器如果没有设置高度和宽度，即使引入了CSS也会显示空白。检查你的map-box.component.css，给.map类添加尺寸样式：

.map {
  height: 100vh; /* 占满视口高度，可根据需求调整 */
  width: 100%;
}

3. 补充Mapbox Access Token（重要！） #

你的代码里没有设置Mapbox的访问令牌，这是加载Mapbox地图服务的必要条件。在初始化地图前添加令牌配置，比如在buildMap方法开头：

buildMap() {
  // 添加这一行，替换成你的Mapbox Access Token
  (mapboxgl as any).accessToken = '你的Mapbox Access Token';
  
  this.map = new mapboxgl.Map({
    container: 'map',
    style: this.style,
    zoom: 13,
    center: [this.lng, this.lat]
  });
  // 剩余代码...
}

你可以在Mapbox官网的账户面板中获取自己的访问令牌。

完成以上步骤后，重新启动项目，地图应该就能正常加载了。

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