优先用嵌入，需从百度地图“分享→嵌入网页”获取含output=html的src并加referrerpolicy="no-referrer"；JS API必须用BMapGL.Map+HTTPS，禁用file://，容器需显式设宽高，坐标须转bd-09。
直接用 <iframe></iframe> 嵌入最省事，能跑通就别碰 JS API；真要交互或自定义，必须用 BMapGL.Map + HTTPS 服务，BMap.Map 已失效。
用 iframe 嵌入百度地图时白屏或报 Refused to display
这是百度主动禁止外链加载的结果——你复制的不是“嵌入代码”，而是浏览器地址栏 URL（比如 https://map.baidu.com/）。这类地址带登录态、临时参数，且被 X-Frame-Options: DENY 拦截。
- 必须去
map.baidu.com搜索目标地点 → 点右上角「分享」→ 选「嵌入网页」→ 复制生成的<iframe></iframe>代码 - 生成的
src必须含output=html参数，缺了就是跳转页，不是内嵌 - 加
referrerpolicy="no-referrer"，尤其 iOS Safari 会因缺失该属性中断加载 - 别设
scrolling="no"，现代浏览器已忽略，但可加loading="lazy"提升首屏性能
用 JavaScript API 初始化地图报 BMap is not defined 或空白容器
两个高频原因：协议不对 + 构造函数写错。2022 年起百度已全面切换 WebGL 渲染，BMap 命名空间彻底停用，新 AK 只支持 BMapGL。
- 页面必须通过
http://localhost或https://访问，禁用file://协议（双击打开 HTML 必然失败） -
<script></script>标签里v=3.0和ak=缺一不可，且域名需在百度控制台白名单备案 - 初始化必须写
new BMapGL.Map("container")，写成BMap.Map会直接报ReferenceError - 容器
<div id="container"> 的宽高必须用 CSS 显式设置（如 <code>height: 500px），仅靠100%在多数布局下无效地图缩放/拖动卡顿、移动端双滚动条
这不是 API 问题，是 CSS 层级和手势冲突导致的视觉异常。
立即学习“前端免费学习笔记（深入）”；
- 给
<iframe></iframe>外层包一个<div style="position: relative; width: 100%; height: 400px;">，再把 iframe 设为 <code>position: absolute; top: 0; left: 0; width: 100%; height: 100% - 加
scrolling="no"仅作兼容，真正有效的是在 iframe 上加style="pointer-events: auto"（否则 iOS 上可能无法触发缩放） - JS API 场景下，确保没同时开启
map.enableDragging()和父容器touch-action: pan-y冲突，后者会拦截横向拖动手势 - 如果用了多个地图实例（比如 tab 切换），销毁不用的地图用
map.clearOverlays()+map = null，否则内存泄漏会导致后续卡顿
最容易被忽略的其实是坐标系：百度地图只认
bd-09坐标，如果你用 GPS 设备导出的wgs-84坐标（比如手机定位原始值），直接传进去会偏移几公里——必须调用BMapGL.Convertor.translate转换，而且这个转换是异步的。 - 给
