<!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>
|
</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 = 'https';
|
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>
|
</body>
|
</html>
|
