必须使用地图平台“嵌入地图”页签复制的完整iframe代码，不可手拼URL；iframe须含loading="lazy"、referrerpolicy="no-referrer-when-downgrade"、allowfullscreen三项属性，并显式设置宽高（≥200px），国内需配高德fallback且全站HTTPS。
直接用官方生成的 <iframe> 代码，别手拼 URL，否则 99% 白屏或跳转首页。
必须从地图平台「嵌入地图」页签复制完整代码
Google、高德、百度都不允许把地址栏 URL（比如 https://www.google.com/maps/place/... 或 https://map.baidu.com/?q=...）直接塞进 src。它们只认自己后台签发的、含 /embed 或 /embed/v1/ 路径的链接，且带加密参数，改一个字符就失效。
- 打开对应地图网站 → 搜索地点 → 点击标记 → 找「分享」→ 切到「嵌入地图」或「嵌入网页」页签
- 复制整段
<iframe>，包括所有属性，不要删loading、referrerpolicy、allowfullscreen - 高德给的是短链（如
https://surl.amap.com/xxx），百度新版也只提供带权限的静态快照链接，不是搜索页 URL
iframe 必须带这三项属性：loading、referrerpolicy、allowfullscreen
缺任意一项都可能触发白屏、403、首屏卡顿或功能缺失——这不是优化建议，是服务端校验和浏览器行为的硬性要求。
-
loading="lazy"：防止地图资源阻塞首屏渲染；但若地图在首屏可视区，延迟加载可能让用户等 1–2 秒才看到 -
referrerpolicy="no-referrer-when-downgrade"：确保 Referer 头能发出去，供地图服务校验域名白名单；漏掉它，密钥验证失败，返回空白或 403 -
allowfullscreen：不加就点不了街景图标全屏；基础地图虽能显示，但交互能力残缺 -
frameborder="0"和style="border:0"已冗余，现代浏览器默认无边框，删掉更干净
宽高必须显式设置，且最小边 ≥ 200px
Google 明确要求任一方向不得小于 200px；height="100%" 单独写基本等于 0，因为父容器没高度。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
width="100%" height="450"，再用 CSS 控制父容器最大宽度（如max-width: 800px） - 响应式场景下，必须用 padding-top 技巧包裹：外层
<div>设position: relative+padding-top: 56.25%（16:9），内层<iframe>设position: absolute+width: 100%; height: 100% - 放进
<table>时，<td>建议设固定宽（如width: 300px）或配合table-layout: fixed，否则容易撑破表格
国内部署必须配高德 fallback，且全站 HTTPS
Google 地图在国内不稳定，百度地图新版已不开放 iframe 交互支持，仅提供静态快照；如果用户打不开 Google，得有兜底方案。
- 不要只放一个
<iframe>，用 CSS 或 JS 做 fallback：优先加载 Google，失败后显示高德短链或纯文本地址（如「北京市朝阳区某某大厦，可使用高德地图搜索」） - 所有地图链接都依赖 HTTPS；HTTP 页面中加载 HTTPS iframe 会报混合内容警告，部分浏览器直接拦截
- Referer 校验对协议、端口、子域名都敏感，本地开发务必用
http://localhost启服务，不能双击 HTML 文件用file://协议打开
最常被忽略的是：地图容器没有明确尺寸、referrerpolicy 缺失、以及把百度搜索页 URL 当嵌入链接用——这三个问题加起来占了白屏案例的八成以上。
