iframe嵌入第三方地图常因X-Frame-Options被拒，百度仅支持带qt=iframe和ak的特定URL，高德/腾讯无合法iframe接口；推荐使用官方JS SDK替代。
iframe 加载地图时白屏或报错 CORS
直接用 <iframe></iframe> 嵌入第三方地图（比如高德、百度、腾讯）的公开 URL，大概率会失败。不是因为写法错，而是这些地图服务默认禁止被 iframe 嵌入——浏览器控制台通常显示 Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'DENY' 或 'frame-ancestors' directive 拒绝加载。
解决思路只有两个：
- 确认该地图平台是否提供「官方 iframe 嵌入支持」：例如百度地图开放平台有 JS API + iframe 混合方案，但必须申请密钥并使用其指定的 iframe 地址（形如
https://map.baidu.com/?qt=iframe&wd=北京&ie=utf-8），不能随便拼 URL - 改用 JS SDK 方式加载（推荐）：iframe 是最简方式，但兼容性和可控性差；而用
BMapGL.Map（百度）、AMap.Map（高德）等原生 SDK，可精准控制缩放、标记、事件，且无跨域拦截
百度地图 iframe 的合法 URL 格式与参数限制
百度地图确实保留了部分 iframe 入口，但仅限于搜索页跳转类轻量场景，不支持自定义样式或交互。合法地址必须带 qt=iframe 参数，且需通过其开放平台申请 ak（API Key）并签名（部分旧版允许免签，但已逐步下线）。
可用示例（需替换为你的 ak）：
<iframe width="600" height="400" frameborder="0" src="https://map.baidu.com/?qt=iframe&wd=上海市静安区&ie=utf-8&ak=YOUR_AK_HERE"></iframe>
注意几个关键点：
-
wd参数只接受中文地名或标准地理编码（如“上海虹桥站”），不支持经纬度直接传入；要传坐标得用 JS API - URL 中不能含空格或特殊符号，需
encodeURIComponent处理（例如wd=%E4%B8%8A%E6%B5%B7） - 移动端 Safari 对 iframe 内地图手势支持弱，缩放可能失效，建议加
touch-action: manipulation样式
高德/腾讯地图没有公开 iframe 接口，别硬试
高德地图官网明确说明：不提供 iframe 嵌入能力；腾讯地图文档中也未列出任何 iframe 相关 URL 规范。网上搜到的类似 https://uri.amap.com/marker?position=116.48,39.99 这类链接，实际是跳转 URL，嵌入 iframe 后会重定向到首页或报 403。
强行嵌入的后果：
- 返回空白页或 404
- Chrome 控制台报
Load denied by X-Frame-Options - 即使某天能显示，后续更新后立刻失效（无 SLA 保障）
替代方案很直接：用高德 AMap.Map 或腾讯 qq.maps.Map，初始化代码 5 行以内，且支持 marker、infoWindow、地图类型切换等完整功能。
iframe 地图在移动端的适配陷阱
就算 iframe 成功加载，移动端仍容易出问题：地图区域无法拖动、双指缩放失灵、滚动页面时地图跟着动（或卡死）。这不是 bug，而是 iframe 默认行为与 touch 事件冲突。
必须加的 CSS 和属性：
- 给
<iframe></iframe>设置style="touch-action: none"（禁用父容器接管手势） - 外层容器加
style="overflow: hidden"，防止滚动穿透 - 确保 iframe 宽高为具体数值（如
100vw/50vh），避免响应式计算错误 - 不要把 iframe 放在
position: fixed或transform元素里，某些安卓 WebView 会渲染异常
更稳妥的做法：放弃 iframe，在页面中预留一个 <div id="map-container"></div>，用 JS SDK 初始化地图，这样所有交互和生命周期都可控。
真正难的不是怎么写 iframe，而是判断什么时候不该用 iframe —— 尤其当需求里出现“点击标记弹窗”“实时刷新位置”“自定义图标”时，iframe 已经不在可行路径上了。
