最可靠方案是直接用<iframe>嵌入官方生成代码并补全必要属性；需严格遵循各地图服务商的URL格式、安全策略及DOM渲染时机要求。
直接用 <iframe> 嵌入是最可靠、零依赖的方案，只要复制官方生成的嵌入代码并补全必要属性，1 分钟就能让地图出现在「联系我们」页面上；手改 URL、用地址栏链接或漏掉 referrerpolicy，90% 会白屏或报错。
为什么 iframe src 一改就空白？
百度和 Google 地图服务端强制校验 src 的路径结构与参数签名。不是所有以 https:// 开头的链接都允许被嵌入。
- Google 必须是
https://www.google.com/maps/embed?pb=...（含/embed和完整pb=参数串），/place/或/search/路径一律拒绝加载，控制台报Refused to display '...' in a frame - 百度必须是
https://map.baidu.com/...output=html...，且带合法uid或newmap=1；https://map.baidu.com/?q=xxx这类搜索页 URL 会被X-Frame-Options: DENY拦截 - 高德地图只认短链（如
https://surl.amap.com/xxx），手拼https://www.amap.com/place/直接失效
iframe 标签必须加哪些属性？
现代浏览器和地图服务商对安全策略、加载时机、交互权限有硬性要求，缺一不可。
-
loading="lazy"：防止地图阻塞首屏渲染，Lighthouse 评分不扣分 -
referrerpolicy="no-referrer-when-downgrade"：Google 地图校验 Referer，百度在 iOS Safari 下缺它必白屏 -
allowfullscreen：启用街景全屏等交互功能（即使不用也建议加上） - 显式设宽高：
width="100%" height="450"，最小边不得小于200px，否则部分安卓 WebView 渲染异常
移动端双滚动条 / 地图缩成一条线怎么修？
这是 CSS 和 iframe 默认行为叠加导致的典型问题，尤其在 iOS Safari 和微信内置浏览器中高频出现。
立即学习“前端免费学习笔记（深入）”；
- 别用
scrolling="no"：该属性已废弃，现代浏览器忽略，但可能触发 fallback 行为 - CSS 必须加：
iframe { border: none; width: 100%; height: 450px; }，避免父容器overflow: auto与 iframe 内部滚动冲突 - 响应式适配建议：
height: 40vh或媒体查询内设height: 300px，避免在小屏上拉出巨大空白 - 中文地址未编码？不要在 URL 里硬塞“北京市朝阳区”，先用
encodeURIComponent("北京市朝阳区")处理，否则定位偏移或 400 错误
国内访问 Google Maps 白屏怎么办？
这不是代码问题，而是网络可达性问题。不能靠“重试”或“换 key”解决，必须设计 fallback。
- 优先 fallback 到高德或腾讯地图的
<iframe>版本（同样需走官方嵌入流程） - 次选 fallback 为纯文本地址 + 静态图（如百度静态图 API：
https://api.map.baidu.com/staticimage/v2?ak=YOUR_AK¢er=116.404,39.915&width=600&height=300） - 绝对不要 fallback 到跳转链接（如
<a href="https://maps.google.com/...">），这会让移动端用户离开你的页面
真正容易被忽略的是：地图容器 DOM 必须在页面加载完成后再渲染——如果你用 Vue/React 动态挂载 <iframe>，要确保父元素已插入 document，否则百度地图在部分安卓 WebView 中会静默失败，且无任何错误提示。
