Mapbox GL JS静态图偶发404加载失败，如何实现自动刷新重试？

实现逻辑 #

• 直接监听图片元素的error事件：该事件会覆盖所有图片加载失败场景（包括404、网络异常、跨域拦截等），无需额外发起请求判断HTTP状态码
• 重试时沿用手动验证的坐标微调规则，保证调整后的请求可正常命中
• 内置最大重试阈值，避免异常场景下的无限循环请求

完整可运行测试代码 #

<img id='staticMap' alt='static Mapbox map of the San Francisco bay area' src='https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-122.337798,37.810550,9.67,0.00,0.00/1000x600@2x?access_token=pk.eyJ1IjoibWNhcmxzb24zMzMiLCJhIjoiY2pxeWMzajA0MDIwMTQ4cGFiemU4eTd5eSJ9.fnYYeOh6-99LgMER26dIeA'>

<script>
    const mapImg = document.getElementById('staticMap');
    const MAX_RETRY_COUNT = 3;
    let currentRetry = 0;

    mapImg.addEventListener('error', function onImageLoadFail() {
        // 达到最大重试次数后移除监听，避免无效请求
        if (currentRetry >= MAX_RETRY_COUNT) {
            mapImg.removeEventListener('error', onImageLoadFail);
            return;
        }
        currentRetry++;

        const originalUrl = mapImg.src;
        // 匹配Mapbox静态图路径中的坐标参数段
        const urlCoordPart = originalUrl.match(/static\/([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+)\//);
        
        if (urlCoordPart) {
            const [, originLon, lat, zoom, pitch, bearing] = urlCoordPart;
            // 经度做1e-6级别的微调，和手动验证的调整逻辑保持一致
            const adjustedLon = (parseFloat(originLon) + 0.000001).toFixed(6);
            // 替换原地址中的坐标段生成新的请求地址
            const newUrl = originalUrl.replace(
                /static\/([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+)\//,
                `static/${adjustedLon},${lat},${zoom},${pitch},${bearing}/`
            );
            mapImg.src = newUrl;
        } else {
            // 坐标解析异常时直接重载原地址
            mapImg.src = originalUrl;
        }
    })
</script>

补充说明 #

• 坐标微调步长可根据实际效果调整，保证调整幅度不影响地图正常显示即可
• 若不需要坐标微调，可直接在error事件中重新赋值原src触发重试，仅保留最大重试阈值逻辑即可
• 若项目已引入jQuery，可直接通过$('#staticMap')选中元素绑定error事件，核心处理逻辑和上述原生实现完全一致

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