最省事用嵌入，需从百度地图“分享→嵌入网页”获取含output=html的src并加referrerpolicy="no-referrer"；交互自定义必须用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" 提升首屏性能

BMapGL.Map 初始化报 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 层级和手势冲突导致的视觉异常。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载

  立即学习“前端免费学习笔记（深入）”；

  • 给 <iframe></iframe> 外层包一个 <div style="position: relative; width: 100%; height: 400px;">，再把 <code>iframe 设为 position: absolute; top: 0; left: 0; width: 100%; height: 100%
  • 在 iframe 上加 style="pointer-events: auto"（否则 iOS 上可能无法触发缩放）
  • JS API 场景下，确保没同时开启 map.enableDragging() 和父容器 touch-action: pan-y 冲突，后者会拦截横向拖动手势
  • 如果用了多个地图实例（比如 tab 切换），销毁不用的地图用 map.clearOverlays() + map = null，否则内存泄漏会导致后续卡顿

  坐标系不统一，标记偏移几百米

  最容易被忽略的其实是坐标系：百度地图只认 bd-09 坐标。如果你用 GPS 设备导出的 wgs-84，直接传进去，标记会整体偏移 300–700 米。

  • 高德、腾讯用 gcj-02，百度用 bd-09，三者互转必须调用对应 SDK 的转换方法，不能靠简单加减
  • 高德 SDK 提供 AMap.convertFrom，类型必须填 gps（wgs-84）才能转 gcj-02
  • 百度 SDK 的 BMap.Convertor.translate 已废弃，v3.0 改用 new BMapGL.Geocoder().getPoint 异步反查，效率低，建议前端预转
  • 别信网上“加 0.006 度就准”的土办法——城市间偏移量不一致

  真正卡住人的，从来不是怎么写那一行 new BMapGL.Map，而是 ak 没备案、file:// 协议硬跑、坐标系混用还反复刷新看效果。