嵌入地图必须使用平台官方生成的iframe代码，不可手动修改URL；需删除width/height属性并用CSS控制响应式尺寸；必须启用HTTPS和referrerpolicy="no-referrer"；地址文案与标记点须完全一致。
直接用 <iframe> 嵌入地图最省事，但必须用地图平台「嵌入地图」功能生成的完整代码，不能手改 URL 或复制分享链接——否则 90% 概率白屏、403 或跳转首页。
复制官方嵌入代码，别碰 URL 参数
百度、高德、Google 地图都提供一键生成的 <iframe>，这个代码里已包含正确协议、参数和 referrer 策略。手动拼接会导致：
- 百度地图漏掉
output=html或域名未在控制台配置 referer → 返回403 Forbidden - Google Maps 用
/maps?q=替代/maps/embed?pb=→ 直接跳转首页或报Refused to display ... in a frame - 高德地图误用
amap.com/share/xxx分享页 URL → 加载空白，实际应走amap.com/embed?接口 - 中文地址没用
encodeURIComponent()编码 → 定位偏移或返回400 Bad Request
删掉 iframe 的 width/height 属性，用 CSS 控制尺寸
<iframe> 自身不支持流式缩放，硬写 width="600" height="450" 在手机上必然横向溢出或双滚动条。必须：
- 从粘贴的原始代码中删掉
width和height属性（保留src、loading、referrerpolicy等） - 用外层
<div class="map-embed">包裹，通过padding-top锁定宽高比（如 16:9 →padding-top: 56.25%） - 内部
<iframe>设为position: absolute; top: 0; left: 0; width: 100%; height: 100% - 加
loading="lazy"—— 地图在页面中下部时能明显提升首屏性能
HTTPS + referrerpolicy="no-referrer" 是硬性前提
所有主流地图服务都强制要求全站 HTTPS，且 <iframe> 必须声明 referrerpolicy="no-referrer"，否则：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Firefox 会拦截加载，控制台报
Referrer Policy: strict-origin-when-cross-origin类错误 - 百度地图在非白名单域名下静默失败，无任何提示
- 即使页面是 HTTPS，若 iframe src 是 HTTP → 直接被浏览器阻止（Mixed Content）
检查你粘贴的代码里是否含 referrerpolicy="no-referrer"；没有就手动加上。
地址文案和地图标记点必须严格一致
用户第一眼不是看地图，而是核对文字地址和红标位置是否匹配。哪怕只差一个“路”字、少个“B座”或楼层号，都会引发信任质疑。实操中常见问题：
- HTML 文本写“XX科技园A栋3楼”，地图标记却打在园区大门
- Google Maps 嵌入代码里的
pb=参数指向旧地址，没同步更新 - 高德地图链接中
center=坐标是去年测的，现在装修后入口已改
每次更新地址文案，必须重新进地图平台搜索该新地址，再点「嵌入地图」生成新代码——不能复用旧链接。
