<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>百度地图加载诊断</title>
|
<style>
|
body {
|
padding: 16px;
|
font-family: -apple-system, 'Microsoft YaHei', sans-serif;
|
font-size: 14px;
|
}
|
h3 { margin: 0 0 12px; }
|
#log {
|
padding: 12px;
|
background: #f5f5f5;
|
border-radius: 6px;
|
font-family: Consolas, Monaco, monospace;
|
font-size: 13px;
|
line-height: 1.9;
|
white-space: pre-wrap;
|
word-break: break-all;
|
}
|
.ok { color: #389e0d; font-weight: 600; }
|
.bad { color: #cf1322; font-weight: 600; }
|
.warn { color: #d46b08; }
|
#map { width: 100%; height: 320px; margin-top: 12px; border: 1px solid #ddd; }
|
.tip { margin-top: 12px; padding: 10px; background: #e6f4ff; border-radius: 6px; }
|
</style>
|
<script>
|
// 尽早注册:捕获 SDK 执行期间抛出的所有 JS 错误(这是最直接的根因线索)
|
window.__bmapErr = [];
|
window.addEventListener('error', function (e) {
|
var t = e.target;
|
if (t && (t.tagName === 'SCRIPT' || t.tagName === 'IMG' || t.tagName === 'LINK')) { return; }
|
window.__bmapErr.push('JS 错误: ' + e.message + ' @' + (e.filename || '').split('/').pop() + ':' + e.lineno + ':' + e.colno);
|
}, true);
|
window.addEventListener('unhandledrejection', function (e) {
|
window.__bmapErr.push('Promise 拒绝: ' + (e.reason && e.reason.message ? e.reason.message : e.reason));
|
});
|
var _ce = console.error;
|
console.error = function () {
|
try { window.__bmapErr.push('console.error: ' + Array.prototype.join.call(arguments, ' ').slice(0, 200)); } catch (_) {}
|
return _ce.apply(console, arguments);
|
};
|
</script>
|
</head>
|
<body>
|
<h3>百度地图 SDK 加载诊断</h3>
|
<div id="log"></div>
|
<div class="tip">
|
把上面的日志整段截图或复制发给技术,就能定位问题。
|
</div>
|
<div id="map"></div>
|
|
<script>
|
var logEl = document.getElementById('log');
|
function log(msg, cls) {
|
var time = new Date().toLocaleTimeString('zh-CN', { hour12: false });
|
var div = document.createElement('div');
|
div.className = cls || '';
|
div.textContent = '[' + time + '] ' + msg;
|
logEl.appendChild(div);
|
}
|
|
var KEY = 'Y2aJXiswwPxy6mwFs1z9c7U5gwX9WfUN';
|
var startAt = Date.now();
|
|
log('浏览器: ' + navigator.userAgent);
|
log('页面地址: ' + location.href);
|
log('页面协议: ' + location.protocol);
|
log('是否在线: ' + navigator.onLine);
|
log('');
|
|
// 与正式代码完全一致的加载方式
|
window.BMAP_PROTOCOL = window.location.protocol.replace(':', '');
|
window.BMapGL_loadScriptTime = Date.now();
|
var url =
|
'https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=' +
|
KEY +
|
'&services=&t=' +
|
Date.now();
|
log('开始加载 SDK: ' + url);
|
log('');
|
|
var script = document.createElement('script');
|
script.src = url;
|
|
script.addEventListener('load', function () {
|
var cost = ((Date.now() - startAt) / 1000).toFixed(2);
|
log('load 事件触发(耗时 ' + cost + ' 秒)', 'ok');
|
log('window.BMapGL = ' + (window.BMapGL ? '存在' : '不存在'), window.BMapGL ? 'ok' : 'bad');
|
|
if (!window.BMapGL) {
|
log('SDK 脚本下载了,但没有挂载地图对象 → Key 或域名白名单问题', 'bad');
|
return;
|
}
|
|
log('地图 SDK 加载成功,开始创建地图…', 'ok');
|
try {
|
var map = new window.BMapGL.Map(document.getElementById('map'));
|
map.centerAndZoom(new window.BMapGL.Point(87.616848, 43.825592), 14);
|
map.enableScrollWheelZoom(true);
|
log('地图实例创建成功,下方应能看到乌鲁木齐地图', 'ok');
|
} catch (e) {
|
log('创建地图失败: ' + e.message, 'bad');
|
}
|
});
|
|
script.addEventListener('error', function () {
|
log('error 事件触发:请求根本没到达百度服务器', 'bad');
|
log('可能原因:公司网络/防火墙拦截、浏览器插件拦截、DNS 解析失败', 'warn');
|
log('请复制下面这个地址,在浏览器地址栏直接打开做对比测试:', 'warn');
|
log(url);
|
});
|
|
setTimeout(function () {
|
if (!window.BMapGL) {
|
log('已经过了 8 秒,地图仍未就绪(如果上面没有任何事件日志,就是请求被挂住了)', 'bad');
|
}
|
}, 8000);
|
|
document.body.appendChild(script);
|
</script>
|
|
<hr style="margin:24px 0" />
|
<h3>经本站代理加载(绕开 IPv6)</h3>
|
<div id="log2" style="padding:12px;background:#f0f9ff;border-radius:6px;font-family:Consolas,monospace;font-size:13px;line-height:1.9;white-space:pre-wrap;word-break:break-all"></div>
|
<div id="map2" style="width:100%;height:320px;margin-top:12px;border:1px solid #ddd"></div>
|
<script>
|
(function () {
|
var el = document.getElementById('log2');
|
function lg(msg, cls) {
|
var t = new Date().toLocaleTimeString('zh-CN', { hour12: false });
|
var d = document.createElement('div');
|
d.className = cls || '';
|
d.textContent = '[' + t + '] ' + msg;
|
el.appendChild(d);
|
}
|
var url = '/bmap-api/getscript?type=webgl&v=1.0&ak=' + KEY + '&services=&t=' + Date.now();
|
lg('开始加载(同域代理): ' + url);
|
var start = Date.now();
|
var s = document.createElement('script');
|
s.src = url;
|
s.addEventListener('load', function () {
|
lg('load 事件触发(耗时 ' + ((Date.now() - start) / 1000).toFixed(2) + ' 秒)', 'ok');
|
lg('window.BMapGL = ' + (window.BMapGL ? '存在' : '不存在'), window.BMapGL ? 'ok' : 'bad');
|
if (window.BMapGL) {
|
try {
|
var m = new window.BMapGL.Map(document.getElementById('map2'));
|
m.centerAndZoom(new window.BMapGL.Point(87.616848, 43.825592), 14);
|
m.enableScrollWheelZoom(true);
|
lg('地图创建成功!如果下方地图能显示,说明瓦片也能加载', 'ok');
|
} catch (e) {
|
lg('创建地图失败: ' + e.message, 'bad');
|
}
|
}
|
});
|
s.addEventListener('error', function () {
|
lg('error 事件触发:代理也不通(说明 9023 端口或 nginx 配置问题)', 'bad');
|
});
|
document.body.appendChild(s);
|
})();
|
</script>
|
|
<hr style="margin:24px 0" />
|
<h3>本站改写版 SDK(SDK + 瓦片 + 接口全部走代理)</h3>
|
<div style="padding:8px;background:#fffbe6;border-radius:6px;font-size:13px;margin-bottom:8px">
|
这是正式页面实际使用的方式:/bmap-sdk.js 里的百度域名已被改写成 /bmap-xxx,
|
由服务器用固定 IPv4 回源,客户端不再直连百度。
|
</div>
|
<div id="log3" style="padding:12px;background:#f6ffed;border-radius:6px;font-family:Consolas,monospace;font-size:13px;line-height:1.9;white-space:pre-wrap;word-break:break-all"></div>
|
<div id="map3" style="width:100%;height:360px;margin-top:12px;border:1px solid #ddd"></div>
|
<script>
|
(function () {
|
var el = document.getElementById('log3');
|
function lg(msg, cls) {
|
var t = new Date().toLocaleTimeString('zh-CN', { hour12: false });
|
var d = document.createElement('div');
|
d.className = cls || '';
|
d.textContent = '[' + t + '] ' + msg;
|
el.appendChild(d);
|
}
|
lg('开始加载 /bmap-sdk.js(改写版)...');
|
var start = Date.now();
|
var s = document.createElement('script');
|
s.src = '/bmap-sdk.js';
|
s.addEventListener('load', function () {
|
lg('load 事件触发(耗时 ' + ((Date.now() - start) / 1000).toFixed(2) + ' 秒)', 'ok');
|
lg('window.BMapGL = ' + (window.BMapGL ? '存在' : '不存在'), window.BMapGL ? 'ok' : 'bad');
|
if (!window.BMapGL) { return; }
|
try {
|
var map = new window.BMapGL.Map(document.getElementById('map3'));
|
map.centerAndZoom(new window.BMapGL.Point(87.616848, 43.825592), 14);
|
map.enableScrollWheelZoom(true);
|
lg('地图创建成功,正在加载瓦片...', 'ok');
|
setTimeout(function () {
|
var imgs = document.querySelectorAll('#map3 canvas, #map3 img');
|
lg('地图区域已渲染元素数量: ' + imgs.length, imgs.length > 0 ? 'ok' : 'warn');
|
lg('👉 如果下方地图能看到乌鲁木齐的街道,说明全部打通了', 'ok');
|
}, 3000);
|
} catch (e) {
|
lg('创建地图失败: ' + e.message, 'bad');
|
}
|
});
|
s.addEventListener('error', function () {
|
lg('error 事件:/bmap-sdk.js 本身加载失败', 'bad');
|
});
|
document.body.appendChild(s);
|
})();
|
</script>
|
|
<hr style="margin:24px 0" />
|
<h3>错误来源抓取(Referer 220 定位)</h3>
|
<div style="padding:8px;background:#fff2f0;border-radius:6px;font-size:13px;margin-bottom:8px">
|
这一块会拦截百度 SDK 的弹窗告警,并记录所有失败请求,用来定位 220 到底来自哪个域名。
|
</div>
|
<div id="log4" style="padding:12px;background:#fff7e6;border-radius:6px;font-family:Consolas,monospace;font-size:13px;line-height:1.9;white-space:pre-wrap;word-break:break-all"></div>
|
<script>
|
(function () {
|
var el = document.getElementById('log4');
|
function lg(msg, cls) {
|
var t = new Date().toLocaleTimeString('zh-CN', { hour12: false });
|
var d = document.createElement('div');
|
d.className = cls || '';
|
d.textContent = '[' + t + '] ' + msg;
|
el.appendChild(d);
|
}
|
// 1) 拦截 alert(百度 SDK 报 220 时是弹 alert)
|
var origAlert = window.alert;
|
window.alert = function (msg) {
|
lg('🚨 百度弹窗: ' + msg, 'bad');
|
return origAlert.apply(window, arguments);
|
};
|
// 2) 记录所有指向 /bmap- 的失败请求
|
var origFetch = window.fetch;
|
if (origFetch) {
|
window.fetch = function (input, init) {
|
var url = typeof input === 'string' ? input : (input && input.url);
|
return origFetch.apply(this, arguments).then(function (res) {
|
if (!res.ok && String(url).indexOf('/bmap-') >= 0) {
|
lg('fetch 失败 ' + res.status + ' ' + url, 'bad');
|
}
|
return res;
|
}).catch(function (e) {
|
if (String(url).indexOf('/bmap-') >= 0) { lg('fetch 异常 ' + url + ' : ' + e.message, 'bad'); }
|
throw e;
|
});
|
};
|
}
|
// 3) 记录图片/脚本加载失败(瓦片是 img)
|
document.addEventListener('error', function (e) {
|
var t = e.target;
|
if (!t) { return; }
|
var u = t.src || t.href || '';
|
if (String(u).indexOf('/bmap-') >= 0) {
|
lg('资源加载失败 <' + t.tagName + '> ' + u.slice(0, 120), 'bad');
|
}
|
}, true);
|
lg('已开始监听。现在把上面的地图块加载一遍,这里会记录失败来源。');
|
lg('(如果这里没有任何记录,说明 220 来自百度 SDK 内部 alert,请看有没有「百度弹窗」行)');
|
})();
|
</script>
|
|
<hr style="margin:24px 0" />
|
<h3>环境能力检测(WebGL / XHR / 渲染)</h3>
|
<div id="log5" style="padding:12px;background:#f9f0ff;border-radius:6px;font-family:Consolas,monospace;font-size:13px;line-height:1.9;white-space:pre-wrap;word-break:break-all"></div>
|
<script>
|
(function () {
|
var el = document.getElementById('log5');
|
function lg(msg, cls) {
|
var d = document.createElement('div');
|
d.className = cls || '';
|
d.textContent = msg;
|
el.appendChild(d);
|
}
|
lg('=== WebGL 能力 ===');
|
var gl1 = null, gl2 = null;
|
try {
|
var c1 = document.createElement('canvas');
|
gl1 = c1.getContext('webgl') || c1.getContext('experimental-webgl');
|
} catch (e) { lg('WebGL1 检测异常: ' + e.message, 'bad'); }
|
try {
|
var c2 = document.createElement('canvas');
|
gl2 = c2.getContext('webgl2');
|
} catch (e) {}
|
lg('WebGL 1.0: ' + (gl1 ? '✅ 支持' : '❌ 不支持'), gl1 ? 'ok' : 'bad');
|
lg('WebGL 2.0: ' + (gl2 ? '✅ 支持' : '❌ 不支持'), gl2 ? 'ok' : 'warn');
|
if (gl1) {
|
try {
|
var ext = gl1.getExtension('WEBGL_debug_renderer_info');
|
if (ext) {
|
lg('渲染器: ' + gl1.getParameter(ext.UNMASKED_RENDERER_WEBGL));
|
lg('厂商: ' + gl1.getParameter(ext.UNMASKED_VENDOR_WEBGL));
|
} else {
|
lg('渲染器: ' + gl1.getParameter(gl1.RENDERER));
|
}
|
} catch (e) {}
|
}
|
lg('');
|
lg('=== 其他 ===');
|
lg('硬件加速(粗略): ' + (navigator.hardwareConcurrency || '?') + ' 核');
|
lg('设备像素比: ' + (window.devicePixelRatio || 1));
|
lg('是否远程桌面/虚拟机: 需看渲染器名称(含 SwiftShader/llvmpipe 即为软件渲染)', 'warn');
|
|
lg('');
|
lg('=== XHR 拦截(记录失败请求的真实来源)===');
|
var origOpen = XMLHttpRequest.prototype.open;
|
var origSend = XMLHttpRequest.prototype.send;
|
XMLHttpRequest.prototype.open = function (m, u) {
|
this.__url = u;
|
return origOpen.apply(this, arguments);
|
};
|
XMLHttpRequest.prototype.send = function () {
|
var xhr = this;
|
xhr.addEventListener('loadend', function () {
|
if (xhr.status === 0 || xhr.status >= 400) {
|
lg('❌ XHR ' + (xhr.status || '失败') + ' ' + String(xhr.__url).slice(0, 150), 'bad');
|
}
|
});
|
return origSend.apply(this, arguments);
|
};
|
lg('已开始拦截 XHR。请刷新页面看完整记录。');
|
|
// 3 秒后检查地图容器里的实际内容
|
setTimeout(function () {
|
var m = document.getElementById('map3');
|
if (!m) { return; }
|
lg('');
|
lg('=== 地图容器实际内容 ===');
|
lg('innerHTML 长度: ' + m.innerHTML.length);
|
lg('canvas 数量: ' + m.querySelectorAll('canvas').length);
|
lg('子元素: ' + m.children.length);
|
lg('尺寸: ' + m.offsetWidth + ' x ' + m.offsetHeight);
|
}, 5000);
|
})();
|
</script>
|
|
<hr style="margin:24px 0" />
|
<h3>深度探测(SDK 完整性 / 实例行为 / 全部网络请求)</h3>
|
<div id="log6" style="padding:12px;background:#e6fffb;border-radius:6px;font-family:Consolas,monospace;font-size:13px;line-height:1.9;white-space:pre-wrap;word-break:break-all"></div>
|
<div id="probe-map" style="width:400px;height:300px;border:1px solid #ccc;margin-top:8px"></div>
|
<script>
|
(function () {
|
var el = document.getElementById('log6');
|
function lg(msg, cls) {
|
var d = document.createElement('div');
|
d.className = cls || '';
|
d.textContent = msg;
|
el.appendChild(d);
|
}
|
lg('=== 1. BMapGL 对象完整性 ===');
|
lg('typeof window.BMapGL = ' + typeof window.BMapGL);
|
if (window.BMapGL) {
|
lg('BMapGL.Map = ' + typeof window.BMapGL.Map);
|
lg('BMapGL.Point = ' + typeof window.BMapGL.Point);
|
lg('BMapGL.Marker= ' + typeof window.BMapGL.Marker);
|
lg('BMapGL.Circle= ' + typeof window.BMapGL.Circle);
|
lg('BMapGL.Geocoder = ' + typeof window.BMapGL.Geocoder);
|
lg('BMapGL.Version = ' + (window.BMapGL.Version || window.BMapGL.version || '(无)'));
|
var keys = Object.keys(window.BMapGL);
|
lg('BMapGL 属性数量: ' + keys.length);
|
lg('前 20 个: ' + keys.slice(0, 20).join(', '));
|
}
|
|
lg('');
|
lg('=== 2. 新建一个纯净容器,创建地图后立即检查 ===');
|
var div = document.getElementById('probe-map');
|
try {
|
var t0 = Date.now();
|
var m = new window.BMapGL.Map(div);
|
lg('new BMapGL.Map() 返回类型: ' + typeof m + '(耗时 ' + (Date.now() - t0) + 'ms)', 'ok');
|
lg('容器 innerHTML 长度(立即): ' + div.innerHTML.length, div.innerHTML.length > 0 ? 'ok' : 'bad');
|
lg('容器 children 数量: ' + div.children.length, div.children.length > 0 ? 'ok' : 'bad');
|
lg('容器 outerHTML 前 300: ' + div.outerHTML.slice(0, 300));
|
lg('map.getSize() = ' + JSON.stringify(m.getSize ? m.getSize() : null));
|
lg('map.getCenter() = ' + (m.getCenter ? JSON.stringify(m.getCenter()) : 'null'));
|
try {
|
m.centerAndZoom(new window.BMapGL.Point(87.616848, 43.825592), 14);
|
lg('centerAndZoom 调用成功', 'ok');
|
} catch (e2) {
|
lg('centerAndZoom 异常: ' + e2.message, 'bad');
|
}
|
setTimeout(function () {
|
lg('1 秒后容器 innerHTML 长度: ' + div.innerHTML.length, div.innerHTML.length > 0 ? 'ok' : 'bad');
|
lg('1 秒后 canvas 数量: ' + div.querySelectorAll('canvas').length);
|
}, 1000);
|
} catch (e) {
|
lg('创建地图抛异常: ' + e.message, 'bad');
|
lg('堆栈: ' + (e.stack || '').slice(0, 300), 'bad');
|
}
|
|
lg('');
|
lg('=== 3. 页面实际发出的全部网络请求(performance API)===');
|
setTimeout(function () {
|
var rs = performance.getEntriesByType('resource');
|
lg('总资源请求: ' + rs.length);
|
var bm = rs.filter(function (r) { return r.name.indexOf('bmap') >= 0 || r.name.indexOf('baidu') >= 0; });
|
lg('bmap/baidu 相关: ' + bm.length);
|
bm.forEach(function (r) {
|
var size = r.transferSize || r.encodedBodySize || 0;
|
var st = r.responseStatus || (size > 0 ? 200 : '?');
|
lg(' [' + st + '] ' + Math.round(r.duration) + 'ms ' + size + 'B ' + r.name.replace(location.origin, '').slice(0, 110), size > 0 ? '' : 'warn');
|
});
|
lg('');
|
lg('=== 4. 控制台错误捕获 ===');
|
lg('(如上方无异常,说明 SDK 静默失败,重点看第 3 节哪些请求 0 字节)');
|
}, 6000);
|
})();
|
</script>
|
|
<hr style="margin:24px 0" />
|
<h3>第 7 块:JS 执行错误 + 2D 版地图(不依赖 WebGL)</h3>
|
<div id="log7" style="padding:12px;background:#fcffe6;border-radius:6px;font-family:Consolas,monospace;font-size:13px;line-height:1.9;white-space:pre-wrap;word-break:break-all"></div>
|
<div id="map4" style="width:100%;height:340px;margin-top:12px;border:1px solid #ddd"></div>
|
<script>
|
(function () {
|
var el = document.getElementById('log7');
|
function lg(msg, cls) { var d = document.createElement('div'); d.className = cls || ''; d.textContent = msg; el.appendChild(d); }
|
|
setTimeout(function () {
|
lg('=== 捕获到的 JS 执行错误 ===');
|
if (!window.__bmapErr || window.__bmapErr.length === 0) {
|
lg('(无 JS 错误)', 'ok');
|
} else {
|
window.__bmapErr.slice(0, 15).forEach(function (m) { lg(m, 'bad'); });
|
}
|
}, 3000);
|
|
lg('');
|
lg('=== 2D 版地图(BMap,不使用 WebGL / Worker)===');
|
var s = document.createElement('script');
|
s.src = '/bmap-api/getscript?v=3.0&ak=' + KEY + '&services=&t=' + Date.now();
|
s.addEventListener('load', function () {
|
lg('load 触发,window.BMap = ' + typeof window.BMap, window.BMap ? 'ok' : 'bad');
|
if (!window.BMap) { return; }
|
try {
|
var map = new window.BMap.Map('map4');
|
map.centerAndZoom(new window.BMap.Point(87.616848, 43.825592), 14);
|
map.enableScrollWheelZoom(true);
|
lg('地图创建成功', 'ok');
|
setTimeout(function () {
|
var d = document.getElementById('map4');
|
lg('容器 innerHTML 长度: ' + d.innerHTML.length, d.innerHTML.length > 0 ? 'ok' : 'bad');
|
lg('容器内 img 数量: ' + d.querySelectorAll('img').length);
|
lg('👉 如果这里能看到乌鲁木齐街道,说明 2D 版可用,我立即切过去', 'ok');
|
}, 3000);
|
} catch (e) {
|
lg('创建 2D 地图异常: ' + e.message, 'bad');
|
}
|
});
|
s.addEventListener('error', function () { lg('2D SDK 加载失败', 'bad'); });
|
document.body.appendChild(s);
|
})();
|
</script>
|
|
<hr style="margin:24px 0" />
|
<h3>第 8 块:2D 版改写 SDK(瓦片也走代理,无 Worker)</h3>
|
<div id="log8" style="padding:12px;background:#f0f5ff;border-radius:6px;font-family:Consolas,monospace;font-size:13px;line-height:1.9;white-space:pre-wrap;word-break:break-all"></div>
|
<div id="map5" style="width:100%;height:340px;margin-top:12px;border:1px solid #ddd"></div>
|
<script>
|
(function () {
|
var el = document.getElementById('log8');
|
function lg(m, c) { var d = document.createElement('div'); d.className = c || ''; d.textContent = m; el.appendChild(d); }
|
lg('加载 /bmap-sdk2d.js(2D 改写版,瓦片走 /bmap-tileN)...');
|
var s = document.createElement('script');
|
s.src = '/bmap-sdk2d.js';
|
s.addEventListener('load', function () {
|
lg('load 触发,window.BMap = ' + typeof window.BMap, window.BMap ? 'ok' : 'bad');
|
if (!window.BMap) { return; }
|
try {
|
var map = new window.BMap.Map('map5');
|
map.centerAndZoom(new window.BMap.Point(87.616848, 43.825592), 14);
|
map.enableScrollWheelZoom(true);
|
lg('2D 地图创建成功', 'ok');
|
setTimeout(function () {
|
var d = document.getElementById('map5');
|
lg('容器 innerHTML: ' + d.innerHTML.length);
|
lg('img 数量: ' + d.querySelectorAll('img').length, d.querySelectorAll('img').length > 0 ? 'ok' : 'bad');
|
lg('👉 能看到的街道就说明 2D 改写版可用', 'ok');
|
}, 4000);
|
} catch (e) { lg('创建异常: ' + e.message, 'bad'); }
|
});
|
s.addEventListener('error', function () { lg('加载失败', 'bad'); });
|
document.body.appendChild(s);
|
})();
|
</script>
|
|
<hr style="margin:24px 0" />
|
<h3>第 9 块:2D 地图的真实网络请求 + DOM 结构</h3>
|
<div id="log9" style="padding:12px;background:#fff0f6;border-radius:6px;font-family:Consolas,monospace;font-size:13px;line-height:1.9;white-space:pre-wrap;word-break:break-all"></div>
|
<div id="map6" style="width:100%;height:300px;margin-top:12px;border:1px solid #ddd"></div>
|
<script>
|
(function () {
|
var el = document.getElementById('log9');
|
function lg(m, c) { var d = document.createElement('div'); d.className = c || ''; d.textContent = m; el.appendChild(d); }
|
// v2.0 必需:api?v=2.0 会设置 window.HOST_TYPE='2',直接用 getscript 时要自己补上
|
window.HOST_TYPE = '2';
|
window.BMAP_PROTOCOL = window.location.protocol.replace(':', '');
|
lg('加载 /bmap-sdk2d.js 并监听网络请求...(226KB,带宽慢的话要等 10 秒以上)');
|
var s = document.createElement('script');
|
s.src = '/bmap-sdk2d.js';
|
s.addEventListener('load', function () {
|
if (!window.BMap) { lg('BMap 未就绪', 'bad'); return; }
|
var map = new window.BMap.Map('map6');
|
map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 13); // 北京,确保有瓦片
|
map.enableScrollWheelZoom(true);
|
lg('地图已创建(北京 z=13)', 'ok');
|
|
setTimeout(function () {
|
var d = document.getElementById('map6');
|
lg('');
|
lg('=== 容器 DOM 结构 ===');
|
lg('innerHTML 长度: ' + d.innerHTML.length);
|
lg('子元素数: ' + d.children.length);
|
lg('img 数: ' + d.querySelectorAll('img').length);
|
lg('canvas 数: ' + d.querySelectorAll('canvas').length);
|
lg('innerHTML 前 600 字符:');
|
lg(d.innerHTML.slice(0, 600));
|
lg('');
|
lg('=== 真实网络请求(含瓦片)===');
|
var rs = performance.getEntriesByType('resource');
|
var tile = rs.filter(function (r) { return /bmap-tile|bdimg|maponline|bmap-api/.test(r.name); });
|
lg('相关请求总数: ' + tile.length + '(页面总请求 ' + rs.length + ')');
|
tile.slice(0, 25).forEach(function (r) {
|
var sz = r.transferSize || r.encodedBodySize || 0;
|
var st = r.responseStatus || (sz > 0 ? 200 : '?');
|
lg(' [' + st + '] ' + (Math.round(r.duration)) + 'ms ' + sz + 'B ' + r.name.slice(0, 120), sz > 0 ? '' : 'bad');
|
});
|
if (tile.length === 0) {
|
lg(' ⚠ 没有任何瓦片请求发出 → SDK 内部瓦片 URL 可能仍指向被 IPv6 拦截的原始域名', 'bad');
|
}
|
}, 15000);
|
});
|
document.body.appendChild(s);
|
})();
|
</script>
|
</body>
|
</html>
|