fix(map): v2.0 补 HOST_TYPE；诊断页延长等待并修正协议

tuqin

3 天以前 abfe3ffe5f6d161f2a6466c8bdbcbc17de1e64b6

 src/components/map/src/utils.ts

@@ -1,24 +1,26 @@
/**
 * 百度地图 SDK 加载工具
 *
 * 加载方式说明（踩过的坑）：
 * ⚠️ 本部署环境（含客户端所在网络）IPv6 不通，而百度所有服务域名的 DNS
 * 都优先返回 AAAA（IPv6）记录，浏览器优先连 IPv6 会立即失败——
 * 表现为 script 的 error 事件 1 秒内触发，地图完全加载不出来。
 *   服务器侧实测：curl -4 得到 HTTP 200 / 0.94s；curl -6 直接失败。
 *
 * 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')"。
 * 因此这里加载的是「本站改写版 SDK」/bmap-sdk.js：
 *   把 SDK 内部所有百度域名（api.map.baidu.com、apimaponline0-3.bdimg.com、
 *   apisv0/1.bdimg.com、webmap0.bdimg.com、map.baidu.com …）
 *   全部替换为 window.location.host + /bmap-xxx，
 *   由服务器 nginx 用固定 IPv4 回源，客户端只访问本站 9023。
 *   （改写脚本生成，见 nginx bmap-proxy.conf 与 public/bmap-sdk.js）
 *
 * 2. 必须直连 getscript，它是 875KB 的真实 SDK。
 * 加载顺序：
 *   1. /bmap-sdk.js          —— 本站改写版（瓦片、接口也全部走代理）
 *   2. /bmap-api/getscript   —— 本站未改写代理（兜底）
 *   3. https://api.map.baidu.com/getscript —— 直连百度（IPv6 通的环境可用）
 *
 * 3. 加载前要设置 window.BMAP_PROTOCOL = 'https'（百度官方要求），
 *    否则 SDK 内部按默认协议拼子资源地址，HTTPS 页面下会被当作混合内容拦截。
 *
 * 4. 不要给 script 加 async = true：SDK 内部用 document.currentScript 定位自身，
 *    async 脚本执行期间 currentScript 为 null，会让它走到 fallback 分支甚至拿不到自身地址。
 *
 * 5. 失败重试一次：偶发网络抖动（尤其是跨省/移动网络）重试往往就能过。
 * 其他注意：加载前要设 window.BMAP_PROTOCOL = 'https'；
 * 不要给 script 加 async（SDK 依赖 document.currentScript）；
 * script 的事件名是 error 不是 onerror。
 */

// 扩展 Window 接口以包含百度地图 GL API
@@ -32,40 +34,31 @@

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

/** 单次尝试加载 */
function loadOnce(accessKey: string, timeout: number): Promise<void> {
/** 用指定地址加载一次 */
function loadFrom(url: string, timeout: number): Promise<void> {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      reject(new Error('百度地图 SDK 加载超时，请检查网络'));
      reject(new Error(`百度地图 SDK 加载超时：${url}`));
    }, 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.src = url;
    // 不要设 async：SDK 依赖 document.currentScript 定位自身

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

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

    document.body.append(script);
@@ -74,16 +67,13 @@

/**
 * 加载百度地图 GL SDK
 * @param timeout 超时时间（毫秒），默认 10000
 * @param timeout 单次尝试的超时时间（毫秒），默认 10000
 * @returns Promise<void>
 */
export const loadBaiduMapSdk = (timeout = 10_000): Promise<void> => {
  // 已加载完成
  if (window.BMapGL) {
    return Promise.resolve();
  }

  // 正在加载中，返回同一个 Promise
  if (loadPromise) {
    return loadPromise;
  }
@@ -94,25 +84,33 @@
  }

  // 百度官方要求：先声明协议，避免 HTTPS 页面下 SDK 拼出 http 子资源地址
  if (typeof window !== 'undefined') {
    window.BMAP_PROTOCOL = 'https';
    window.BMapGL_loadScriptTime = Date.now();
  }
  window.BMAP_PROTOCOL = window.location.protocol.replace(':', '');
  // v2.0 必需：官方 api?v=2.0 会设置 HOST_TYPE='2'，直接用 getscript 时要自己补
  (window as any).HOST_TYPE = '2';
  window.BMapGL_loadScriptTime = Date.now();

  const query = `type=webgl&v=1.0&ak=${accessKey}&services=&t=${Date.now()}`;
  const candidates = [
    // 本站改写版：内部域名全部指向本站代理，瓦片/接口都走 IPv4
    '/bmap-sdk.js',
    // 本站代理的官方 SDK（未改写，瓦片仍指向百度，仅作兜底）
    `/bmap-api/getscript?${query}`,
    // 直连百度（仅 IPv6 正常的环境有效）
    `https://api.map.baidu.com/getscript?${query}`,
  ];

  loadPromise = (async () => {
    try {
      await loadOnce(accessKey, timeout);
    } catch (error) {
      // 首次失败重试一次，应对偶发网络抖动
      if (failCount < 1) {
        failCount += 1;
        await loadOnce(accessKey, timeout);
      } else {
        failCount = 0;
        loadPromise = null;
        throw error;
    const errors: string[] = [];
    for (const url of candidates) {
      try {
        await loadFrom(url, timeout);
        return;
      } catch (error: any) {
        errors.push(error?.message ?? String(error));
      }
    }
    loadPromise = null;
    throw new Error(`百度地图 SDK 加载失败：${errors.join(' | ')}`);
  })();

  return loadPromise;