| | |
| | | log(''); |
| | | |
| | | // 与正式代码完全一致的加载方式 |
| | | window.BMAP_PROTOCOL = 'https'; |
| | | 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=' + |
| | |
| | | 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); } |
| | | lg('加载 /bmap-sdk2d.js 并监听网络请求...'); |
| | | 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'); |
| | | } |
| | | }, 5000); |
| | | }); |
| | | document.body.appendChild(s); |
| | | })(); |
| | | </script> |
| | | </body> |
| | | </html> |