参照Mapbox添加点教程第3部分操作后网页显示空白

对应你提供的代码，白屏问题按出现概率从高到低排查：

• 地图容器高度计算为0
  你当前的CSS仅给body设置了边距，没有给html根标签设置高度规则。#map容器用了绝对定位+top:0;bottom:0的高度适配规则，这类规则要求所有父级容器（包括html、body）都有明确的高度值，否则浏览器计算出的#map实际高度为0，视觉上就是全白页面。
  直接替换原有style块内的CSS代码即可修复：

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  

• Access Token 配置无效
  你代码中mapboxgl.accessToken位置目前是占位文本，必须替换为你Mapbox账号下生成的、以pk.开头的公开访问令牌。如果令牌填写错误、过期、或者当前部署域名没有在Mapbox账号后台加入令牌允许的访问域名列表，地图资源会被拦截，控制台会抛出401/403权限错误。
• 自定义样式地址非法
  你隐去的style参数如果不符合Mapbox样式地址规范（标准自定义样式格式为mapbox://styles/[账号名]/[样式ID]，也可填入公网可访问的合法style JSON地址），样式资源加载失败会直接导致地图无法渲染。可以先临时替换为官方默认样式mapbox://styles/mapbox/streets-v12测试，如果默认样式可正常加载，说明问题出在自定义样式的地址或访问权限上。
• 初始中心点坐标格式错误
  Mapbox GL JS的center参数要求格式为[经度, 纬度]，经度取值范围为-180到180，纬度取值范围为-90到90。如果经纬度写反、数值超出范围，地图初始会定位到无瓦片数据的区域，视觉上也会呈现空白。

排查时优先打开浏览器开发者工具的Console面板，所有Mapbox资源加载、参数配置的错误都会直接打印在控制台，对照报错信息定位问题的效率远高于盲改代码。

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