嘿，我来帮你分析下为什么Mapbox地图在Fancybox里加载不出来～ 你遇到的问题其实很常见，主要是地图容器尺寸和Mapbox初始化时机的DOM渲染问题导致的，咱们一步步来解决：

1. 地图容器缺少明确的宽高样式 #

Mapbox渲染地图的前提是容器必须有明确的宽高值，否则它无法计算渲染区域的大小。你原来的#map_screen没有设置尺寸，即使Fancybox给外层弹窗设置了宽高，内部容器也没有占满弹窗空间，导致地图无法渲染。

先修改你的HTML结构，给地图容器添加上全屏样式：

<div id="markers_map" style="display:none"> 
  <div id="map_screen" style="width: 100%; height: 100%;"></div> 
</div>

2. 初始化后需要手动触发Mapbox的resize #

即使你在afterShow回调里初始化地图，有时候Fancybox的弹窗DOM还没完全完成渲染，Mapbox初始化时检测到的容器尺寸还是0。这时候需要强制Mapbox重新计算容器尺寸并渲染，也就是调用map.resize()方法。

修正后的JS代码如下：

$("#b_google_map_table").on("click", function(){
  $.fancybox.open($("#markers_map"), {
    width: 800,
    height: 500,
    afterShow(){
      // 确保你的token是有效的全局变量或者已正确引入
      mapboxgl.accessToken = token; 
      let map = new mapboxgl.Map({
        container: "map_screen",
        style: "mapbox://styles/mapbox/streets-v9",
        center: [-96, 37.8],
        zoom: 14
      });
      
      // 地图加载完成后触发resize，确保容器尺寸已稳定
      map.on('load', function() {
        map.resize();
      });
    },
  });
});

额外的检查点 #

• 打开浏览器控制台（F12），看看有没有报错：比如401 Unauthorized说明你的Mapbox token无效或者权限不足；如果有容器找不到的错误，检查container参数是否和DOM的id完全匹配。
• 确保Mapbox的JS库已经在页面上正确加载，加载顺序要在你的自定义JS之前。

这样修改后，地图应该就能正常在Fancybox弹窗里显示啦～

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