优先选 iframe 嵌入第三方地图，因其开箱即用、兼容性好、无需密钥和 JS 初始化；需从官方“嵌入地图”页签获取代码，注意 src 格式、响应式写法及国内 GFW 下的 fallback 方案。
直接用 iframe 嵌入第三方地图是最简单、最可靠的方式，适合绝大多数静态页面或 CMS（如 Jimdo、WordPress）场景。它不依赖 JS 执行环境，兼容性好，也不需要申请密钥或写初始化逻辑。
为什么优先选 iframe 而不是直接调用地图 API？
因为 iframe 是“开箱即用”的隔离容器：地图的全部交互（缩放、拖拽、街景切换）由服务商自己维护，你只管嵌入；而调用 Google Maps / 高德 / 百度的 JS API 需要注册密钥、处理异步加载、管理 DOM 容器高度、应对跨域限制，稍有疏漏就白屏或报错 InvalidValueError: setCenter: not a LatLng or LatLngLiteral。
常见踩坑点包括：
- 复制了分享链接（如
https://maps.google.com/...）而非嵌入代码里的<iframe></iframe>标签 - 没删掉
frameborder="1"导致地图边缘出现丑陋黑框 - 设了
width="600"但父容器宽度不足，地图被截断 - 在 Jimdo 免费版中误用了“嵌入网页”功能（它只接受 URL），却没选“HTML/JavaScript”模块粘贴完整
<iframe></iframe>
Google Maps 嵌入必须用“嵌入地图”页签生成的代码
打开 Google Maps → 搜索地点 → 点右上角“分享” → 切到“嵌入地图”页签 → 复制整个 <iframe></iframe> 代码。注意检查以下三项：
-
src属性里必须含maps/embed，不能是maps/search或纯跳转链接 -
loading="lazy"可保留，提升首屏性能 -
referrerpolicy="no-referrer-when-downgrade"是安全必需项，别手动删
若在国内部署，需明确告知用户：该地图无法加载（因 GFW），此时应 fallback 到高德或 OpenStreetMap。
高德/百度地图 iframe 的 src 必须来自官方分享入口
高德地图：打开地点 → 点右上角「分享」→「嵌入网页」→ 复制 <iframe></iframe>；百度地图：同理，找「分享」→「嵌入网页」。不要手拼 URL，例如：
❌ 错误：<iframe src="https://www.amap.com/place/"></iframe>（这不是嵌入地址）
✅ 正确：<iframe src="https://surl.amap.com/6Sr6H0e9Vw"></iframe>（短链由高德后台动态生成，带权限和样式）
这两个服务的 iframe 默认支持中文 POI 和国内路网，但要注意：
- 高德 iframe 不支持自定义标记点，想加图标得换 JS API 方式
- 百度 iframe 在部分老旧 Android WebView 中可能渲染异常，建议加
style="border:0;"显式清边框
响应式适配的关键是包裹容器 + CSS 控制高度
直接写 width="100%" height="400" 会导致小屏幕地图过长、大屏幕留白。更稳妥的做法是：
- 用一个
<div class="map-container"> 包住 <code><iframe></iframe> - 给容器设
padding-bottom: 56.25%（16:9 比例）+position: relative - 把
<iframe></iframe>设为position: absolute; top: 0; left: 0; width: 100%; height: 100%
这样地图就能随容器宽高比缩放，且不会撑开父布局。如果用 Jimdo 或类似建站工具，直接在 HTML 模块里写这段结构即可，无需额外 CSS 文件。
真正容易被忽略的是：iframe 加载失败时没有任何提示。建议在 <iframe></iframe> 后紧跟一段提示文字，用 aria-hidden="true" 避免读屏干扰，但对普通用户可见——比如“地图加载中…若长时间未显示，请检查网络”。
