iframe嵌入第三方地图常因x-frame-options拒绝而白屏或报错，官方通常不支持直接嵌入；若需交互，应优先使用js sdk而非iframe。
iframe 加载地图时白屏或报错 CORS
第三方地图服务（比如高德、百度、腾讯地图）通常禁止被 iframe 直接嵌入，直接写 <iframe src="https://map.baidu.com"></iframe> 大概率白屏或控制台报 Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'DENY'。这不是你代码写错了，是对方服务器主动拒绝嵌入。
- 先确认该地图服务是否明确支持 iframe 嵌入——查其官方文档，搜索“iframe”或“嵌入式地图”，只有少数开放了专用嵌入 URL（如高德的
https://www.amap.com/embed?...） - 不要尝试用代理或改 header 绕过，X-Frame-Options 是响应头硬限制，前端无法覆盖
- 如果必须嵌入，优先找官方提供的轻量级 JS SDK（如
AMap.Map），而非 iframe
iframe 地图加载后无法交互（拖拽/缩放失效）
常见于移动端或设置了 sandbox 属性的 iframe。浏览器默认会禁用 iframe 内部的 pointer events 和 touch 事件，导致地图“看起来在，但点不动”。
- 确保 iframe 没有设置
sandbox="..."，或至少包含allow-scripts allow-same-origin allow-pointer-lock allow-touch-events - 检查父页面 CSS 是否意外加了
pointer-events: none到 iframe 或其容器上 - 某些地图（如百度地图 iframe 版）要求显式传参
enable=1，例如：https://map.baidu.com/?qt=place&wd=北京&c=131&ie=utf-8&newmap=1&enable=1
iframe 地图在 iOS Safari 中缩放异常或卡顿
iOS Safari 对 iframe 渲染有特殊限制，尤其当 iframe 高度靠 JS 动态计算或含百分比宽高时，地图容器容易失真、触摸反馈延迟。
- 给 iframe 设置明确的
width和height（推荐用 px，避免 % 或 vh） - 加上
loading="lazy"可能反而加重 iOS 卡顿，建议移除 - 避免把 iframe 放在
position: fixed或 transform 容器里，Safari 对这类组合渲染不稳定 - 测试时务必真机验证，模拟器行为和实际差异很大
替代方案：为什么多数场景该放弃 iframe，改用原生 SDK
iframe 看似简单，但调试成本高、兼容性差、功能受限（比如没法监听点击标记、获取经纬度、叠加自定义图层）。真正要集成地图，几乎都得切到 JS SDK。
- 高德：引入
https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY，再 newAMap.Map - 百度：引入
https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK，再 newBMap.Map - 注意 key/ak 必须绑定域名，本地开发用
localhost或127.0.0.1需提前在控制台添加
iframe 只适合极简展示（比如静态位置截图），只要涉及交互、定位、标注，就别硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
