主流地图服务禁止iframe嵌入,需用官方js api(高德/百度)或静态图+跳转方案;腾讯地图iframe支持不稳定且已基本失效。

直接用 <iframe></iframe> 嵌入地图页面会失败
主流地图服务(如高德、百度、腾讯)已默认禁止外部网站通过 <iframe></iframe> 直接嵌入其导航页,浏览器控制台通常报错:X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'。这不是你代码写错了,是对方服务器主动拒绝被嵌入。
高德/百度地图官方提供的是 JS API,不是 iframe 导航页
想在网页展示可交互地图,必须用它们的 SDK:
- 高德:引入
<script src="https://webapi.amap.com/maps?v=2.0&key=%E4%BD%A0%E7%9A%84KEY"></script>,再用new AMap.Map()初始化容器 - 百度:加载
https://api.map.baidu.com/api?v=3.0&ak=你的AK,再调用new BMap.Map() - 二者都要求申请密钥(Key/AK),且需绑定域名白名单
- 直接 iframe 引用
https://www.amap.com/search?query=xxx或https://map.baidu.com/?q=xxx会跳转或空白,不渲染地图
真要 iframe 嵌入,只有一种可行路径:用静态图 + 跳转链接
若仅需示意位置,不需交互,可用地图服务商提供的「静态图」接口生成图片,再套一层跳转逻辑:
- 高德静态图:
https://restapi.amap.com/v3/staticmap?location=116.481488,39.990464&zoom=11&size=750*300&markers=mid,0x000000:A:116.481488,39.990464&key=你的KEY - 百度静态图:
http://api.map.baidu.com/staticimage/v2?ak=你的AK¢er=116.481488,39.990464&width=750&height=300&zoom=11&markers=116.481488,39.990464 - 把图片
<img>放进<a href="https://www.amap.com/?keywords=xxx"></a>链接里,点击跳转到原生导航页 - 注意:静态图无缩放、拖拽、POI 点击等能力,纯示意用途
腾讯地图例外:部分 URL 支持 iframe,但限制极多
腾讯地图曾开放过 https://apis.map.qq.com/uri/v1/marker?... 这类 URI Scheme 页面,某些旧版本支持 iframe 嵌入,但:
- 仅限移动端 WebView 场景,桌面 Chrome/Firefox 大概率被拦截
- 参数必须完整,
marker必须带coord_type和title,缺一不可 - 无官方文档维护,随时可能失效;2023 年后新申请的 key 已无法使用该方式
- 实际测试中,多数情况 iframe 加载后显示“请在微信中打开”,或直接 403
别赌这个例外——它不是稳定方案,而是历史残留的灰度通道。










