fix(map): 按百度官方规范修正 SDK 加载，并加诊断页定位线上加载失败

tuqin

3 天以前 23b513b644720666c5bda5073b34567cbadbbe4a

 src/components/map/src/utils.ts

@@ -1,28 +1,76 @@
/**
 * 百度地图 SDK 加载工具
 *
 * 重要：这里必须直连 getscript，不能用 api?... 地址。
 * api?v=1.0&type=webgl&ak=xxx 返回的是一段
 *   document.write('<script src="https://api.map.baidu.com/getscript?..."></script>')
 * 而通过 document.body.append(script) 动态插入的脚本里，document.write 会被浏览器拦截
 * （Chrome 直接提示 "A parser-blocking, cross site script ... invoked via document.write was NOT executed"），
 * 导致真正的 SDK 从未加载、window.BMapGL 一直是 undefined/null。
 * 但 api 里的 callback 仍会被调用，调用方误以为加载成功，接着执行 new BMapGL.Map()
 * 就抛出「Cannot read properties of null (reading 'Map')」。
 * 加载方式说明（踩过的坑）：
 *
 * getscript 返回的是 875KB 的真实 SDK（已实测 HTTP 200 且含 BMapGL 定义），
 * 直接用 script.src 加载即可，脚本执行完 window.BMapGL 就已就绪。
 * 1. 不能用 api?v=1.0&type=webgl&ak=xxx 这个地址。
 *    它返回的是一段 document.write('<script src=".../getscript?...">')，
 *    而通过 document.body.append(script) 动态插入的脚本里 document.write 会被浏览器拦截，
 *    导致真正的 SDK 从未执行、window.BMapGL 一直是空；但 api 的 callback 仍会被调用，
 *    调用方误判成功，接着 new BMapGL.Map() 就抛
 *    "Cannot read properties of null (reading 'Map')"。
 *
 * 2. 必须直连 getscript，它是 875KB 的真实 SDK。
 *
 * 3. 加载前要设置 window.BMAP_PROTOCOL = 'https'（百度官方要求），
 *    否则 SDK 内部按默认协议拼子资源地址，HTTPS 页面下会被当作混合内容拦截。
 *
 * 4. 不要给 script 加 async = true：SDK 内部用 document.currentScript 定位自身，
 *    async 脚本执行期间 currentScript 为 null，会让它走到 fallback 分支甚至拿不到自身地址。
 *
 * 5. 失败重试一次：偶发网络抖动（尤其是跨省/移动网络）重试往往就能过。
 */

// 扩展 Window 接口以包含百度地图 GL API
declare global {
  interface Window {
    BMapGL: any;
    BMAP_PROTOCOL: any;
    BMapGL_loadScriptTime: any;
  }
}

// SDK 加载状态
let loadPromise: null | Promise<void> = null;
// 加载失败次数，用于决定是否重试
let failCount = 0;

/** 单次尝试加载 */
function loadOnce(accessKey: string, timeout: number): Promise<void> {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      reject(new Error('百度地图 SDK 加载超时，请检查网络'));
    }, timeout);

    const script = document.createElement('script');
    script.src = `https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${accessKey}&services=&t=${Date.now()}`;
    // 注意：不要设 async，SDK 依赖 document.currentScript 定位自身

    script.addEventListener('load', () => {
      clearTimeout(timeoutId);
      if (!window.BMapGL) {
        // ak 无效 / 域名未授权 / 被拦截时，脚本能加载但不会挂载 BMapGL
        reject(
          new Error('百度地图加载异常：未获取到地图对象，请检查 Key 或域名授权'),
        );
        return;
      }
      resolve();
    });

    // 事件名是 error，不是 onerror（写 onerror 永远不会触发）
    script.addEventListener('error', () => {
      clearTimeout(timeoutId);
      reject(
        new Error(
          '百度地图 SDK 加载失败（无法访问 api.map.baidu.com，可能是网络限制或插件拦截）',
        ),
      );
    });

    document.body.append(script);
  });
}

/**
 * 加载百度地图 GL SDK
@@ -45,38 +93,27 @@
    return Promise.reject(new Error('未配置 VITE_BAIDU_MAP_KEY'));
  }

  loadPromise = new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      loadPromise = null;
      reject(new Error('百度地图 SDK 加载超时，请检查网络'));
    }, timeout);
  // 百度官方要求：先声明协议，避免 HTTPS 页面下 SDK 拼出 http 子资源地址
  if (typeof window !== 'undefined') {
    window.BMAP_PROTOCOL = 'https';
    window.BMapGL_loadScriptTime = Date.now();
  }

    const script = document.createElement('script');
    script.src = `https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${accessKey}&services=&t=${Date.now()}`;
    script.async = true;

    script.addEventListener('load', () => {
      clearTimeout(timeoutId);
      if (!window.BMapGL) {
        // ak 无效 / 域名未授权 / 被拦截时，脚本能加载但不会挂载 BMapGL
  loadPromise = (async () => {
    try {
      await loadOnce(accessKey, timeout);
    } catch (error) {
      // 首次失败重试一次，应对偶发网络抖动
      if (failCount < 1) {
        failCount += 1;
        await loadOnce(accessKey, timeout);
      } else {
        failCount = 0;
        loadPromise = null;
        reject(
          new Error('百度地图加载异常：未获取到地图对象，请检查 Key 或域名授权'),
        );
        return;
        throw error;
      }
      resolve();
    });

    // 注意：事件名是 error，不是 onerror（写 onerror 永远不会触发）
    script.addEventListener('error', () => {
      clearTimeout(timeoutId);
      loadPromise = null;
      reject(new Error('百度地图 SDK 加载失败，请检查网络'));
    });

    document.body.append(script);
  });
    }
  })();

  return loadPromise;
};