如何在网页中嵌入地图组件_IFRAME标签加载外部地图URL-html教程-PHP中文网

iframe嵌入第三方地图常因X-Frame-Options被拒，百度仅支持带qt=iframe和ak的特定URL，高德/腾讯无合法iframe接口；推荐使用官方JS SDK替代。

如何在网页中嵌入地图组件_iframe标签加载外部地图url

iframe 加载地图时白屏或报错 CORS

直接用嵌入第三方地图（比如高德、百度、腾讯）的公开 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="100%" height="400" frameborder="0" src="https://map.baidu.com/?qt=iframe&wd=%E4%B8%8A%E6%B5%B7%E5%B8%82%E9%9D%99%E5%AE%89%E5%8C%BA&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。

强行嵌入的后果：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载