优先选 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/...）而非嵌入代码里的 标签
• 没删掉 frameborder="1" 导致地图边缘出现丑陋黑框
• 设了 width="600" 但父容器宽度不足，地图被截断
• 在 Jimdo 免费版中误用了“嵌入网页”功能（它只接受 URL），却没选“HTML/JavaScript”模块粘贴完整

Google Maps 嵌入必须用“嵌入地图”页签生成的代码

打开 Google Maps → 搜索地点 → 点右上角“分享” → 切到“嵌入地图”页签 → 复制整个 代码。注意检查以下三项：

• src 属性里必须含 maps/embed，不能是 maps/search 或纯跳转链接
• loading="lazy" 可保留，提升首屏性能
• referrerpolicy="no-referrer-when-downgrade" 是安全必需项，别手动删

若在国内部署，需明确告知用户：该地图无法加载（因 GFW），此时应 fallback 到高德或 OpenStreetMap。

高德/百度地图 iframe 的 src 必须来自官方分享入口

高德地图：打开地点 → 点右上角「分享」→「嵌入网页」→ 复制 ；百度地图：同理，找「分享」→「嵌入网页」。不要手拼 URL，例如：

❌ 错误：（这不是嵌入地址）
✅ 正确：（短链由高德后台动态生成，带权限和样式）

这两个服务的 iframe 默认支持中文 POI 和国内路网，但要注意：

• 高德 iframe 不支持自定义标记点，想加图标得换 JS API 方式
• 百度 iframe 在部分老旧 Android WebView 中可能渲染异常，建议加 style="border:0;" 显式清边框

响应式适配的关键是包裹容器 + CSS 控制高度

直接写 width="100%" height="400" 会导致小屏幕地图过长、大屏幕留白。更稳妥的做法是：

• 用一个
  包住
• 给容器设 padding-bottom: 56.25%（16:9 比例）+ position: relative
• 把 设为 position: absolute; top: 0; left: 0; width: 100%; height: 100%

这样地图就能随容器宽高比缩放，且不会撑开父布局。如果用 Jimdo 或类似建站工具，直接在 HTML 模块里写这段结构即可，无需额外 CSS 文件。

真正容易被忽略的是：iframe 加载失败时没有任何提示。建议在 后紧跟一段提示文字，用 aria-hidden="true" 避免读屏干扰，但对普通用户可见——比如“地图加载中…若长时间未显示，请检查网络”。