根本原因是iframe高度依赖父容器明确尺寸，纯百分比高度在父容器无height时失效；正确做法是用padding-top+absolute布局控制比例，且必须通过地图平台“嵌入地图”功能获取代码，不可手动拼接URL。
用 iframe 嵌入地图时，为什么 width="100%" 但地图不随容器缩放？
根本原因是 iframe 的宽高行为依赖父容器有明确尺寸，而纯百分比高度（如 height="100%"）在父容器未设 height 时会失效——浏览器无法推导“100% 是多少像素”。Google Maps 官方也明确要求任一维度 ≥ 200px，否则可能白屏或被拒绝渲染。
正确做法是用 CSS 容器控制比例，而非只靠 iframe 属性：
- 把
iframe包进一个带position: relative的<div> <li>给该 <code><div> 设置 <code>padding-top: 56.25%（16:9 比例）或padding-top: 75%（4:3），替代 height - 将
iframe设为position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必加
max-width: 100%和height: auto防止溢出 - 从百度地图搜索页复制
https://map.baidu.com/?q=上海→ 报错Refused to display 'https://map.baidu.com/' in a frame - 用 Google Maps 地址栏链接
https://www.google.com/maps/place/...→ 返回 403 或跳转首页 - 中文地址没用
encodeURIComponent()编码 → 定位偏移或 400 错误 - 漏掉
output=embed（百度）或maps/embed?（Google）参数 → 加载空白 -
allowfullscreen：启用街景全屏（即使不用，也不影响） -
title="公司地址位置图"：无障碍必需，屏幕阅读器依赖 - 删掉过时的
frameborder="0"和scrolling="no"：现代浏览器默认无边框，留着反而冗余 - 确保用的是高德新版页面（右上角无「体验旧版」提示）
- 起点填集合点，终点填团建营地，中间依次添加地铁站等接送点
- 路线确认无误后再点「分享」→ 切到「嵌入」Tab 复制代码
- 嵌入后若发现移动端显示过小，检查父容器是否设置了最小高度（如
min-height: 400px）
百度/高德/Google 地图的 iframe src 能不能自己拼？
不能。手动拼接 URL 是嵌入失败的头号原因。
常见翻车点：
立即学习“前端免费学习笔记（深入）”；
唯一稳妥方式：打开对应地图平台 → 搜索目标地点或规划路线 → 点「分享」→ 切到「嵌入地图」Tab → 复制整段生成的 <iframe></iframe> 代码。
referrerpolicy="no-referrer" 和 loading="lazy" 必须加吗？
必须加，且顺序和值都不能错。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
referrerpolicy="no-referrer-when-downgrade" 是 Google Maps 的硬性要求：它用于校验 Referer 是否来自合法域名，缺了就 403；而百度地图虽不显式报错，但国内 CDN 会因 Referer 不匹配拒绝返回地图瓦片。
loading="lazy" 不只是性能优化——它防止地图资源阻塞首屏渲染，Lighthouse 会因此扣分；移动端 WebView 对 loading="lazy" 支持不稳定时，可额外加 fetchpriority="low" 辅助。
其他推荐属性：
多个接送点+终点的路线图怎么嵌入？
普通单点嵌入不适用。你需要的是“路线模式”，不是“地点模式”。
高德地图 PC 站（www.amap.com）是目前最省事的选择：支持在路线规划页添加多个途经点（即你的多个接送点），再通过「分享」→「嵌入地图」生成带完整路径的 iframe，无需 API Key、无需 JS 初始化。
操作要点：
注意：百度地图网页版已不提供路线图的直接 iframe 嵌入，必须走 JS SDK；Google Maps 的 embed/v1 路线需密钥，不适合一次性通知页。
