MapBox标记不显示问题：内联GeoJson迁移至URL后加载失败

针对你把内联GeoJSON迁移到独立URL后，3000+地图标记无法显示的问题，我整理了几个实用的排查方向，你可以一步步来检查：

• 先确认GeoJSON文件的可访问性
  打开浏览器开发者工具（按F12）切换到「Network」标签，刷新页面后过滤GeoJSON相关请求，查看请求的状态码：

  • 如果是404，说明文件路径写错了，要检查URL是否和文件实际位置匹配；
  • 如果是500，可能是服务器配置问题，需要联系运维排查；
  • 如果出现跨域报错（控制台会提示CORS相关信息），得让服务器配置CORS响应头，允许你的地图页面域名访问这个GeoJSON文件。

• 验证GeoJSON格式的准确性
  内联时正常显示不代表导出到文件后格式没问题——可能导出时不小心多打了逗号、漏了引号，或者文件被截断。你可以把GeoJSON文件内容复制到GeoJSON校验工具里检查，确保完全符合标准格式。另外也要确认文件是完整的，没有因为体积过大被服务器截断。

• 检查加载GeoJSON的代码逻辑
  迁移到独立URL后，代码写法和内联模式有区别，要确认逻辑没有问题：

  // 正确的直接引用URL方式
  map.addSource('markers', {
    type: 'geojson',
    data: '你的GeoJSON文件URL'
  });
  
  // 如果用fetch手动加载，必须处理异步逻辑
  fetch('你的GeoJSON文件URL')
    .then(res => res.json())
    .then(geoData => {
      map.addSource('markers', { type: 'geojson', data: geoData });
      // 一定要添加对应的图层，否则标记不会渲染
      map.addLayer({
        id: 'marker-layer',
        type: 'circle', // 或者你用的symbol/marker类型
        source: 'markers',
        paint: {
          'circle-radius': 5,
          'circle-color': '#ff0000'
        }
      });
    })
    .catch(err => console.error('加载GeoJSON失败:', err));
  

  重点检查：源ID和图层的source属性是否匹配，有没有在地图初始化完成后再执行这些代码（最好放在map.on('load', () => { /* 这里写加载逻辑 */ })回调里）。另外打开控制台看有没有报错，比如“找不到对应源”“样式属性错误”这类信息，都是关键线索。

• 排除性能导致的渲染问题
  虽然你是为了提升性能，但3000+标记如果用复杂样式可能会有渲染压力，但一般不会完全不显示。可以先简化样式（比如用最简单的红色小圆圈）测试，如果简化后能显示，再逐步调整样式细节；如果还是不显示，那大概率不是性能问题，回到前面的步骤排查。

如果排查完这些还没解决，建议把控制台的报错信息贴出来，或者补充更多代码细节，这样能更精准定位问题。

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