必须用官方生成的完整嵌入代码，禁用手动拼接URL；需用CSS响应式容器包裹iframe；务必声明referrerpolicy="no-referrer"且全站HTTPS；JS SDK初始化前确保DOM就绪和容器尺寸明确。
iframe嵌入必须用官方生成的完整代码，不能手改URL
直接复制地图平台「嵌入地图」按钮生成的<iframe>是唯一稳妥方式。百度地图若用搜索页链接（如https://map.baidu.com/?q=北京）或漏掉output=html参数，会报Refused to display 'https://map.baidu.com/' in a frame；Google Maps 若用/maps?q=开头的地址而非/maps/embed?pb=，则返回403或跳转首页。
常见错误来源：
- 手动拼接中文地址未用
encodeURIComponent()编码，导致定位偏移或400错误 - 从分享弹窗里误复制了「短链接」或「网页链接」，不是真正的嵌入代码
- 高德地图用
https://www.amap.com/share/xxx这类分享页URL，实际应走https://www.amap.com/embed?接口
响应式容器要靠CSS包裹，不能只设iframe宽高
<iframe>自身不支持aspect-ratio或流式缩放，硬写width="100%" height="400"在手机上必然溢出或双滚动条。必须用外层<div>锁定宽高比。
推荐结构：
立即学习“前端免费学习笔记（深入）”；
<div class="map-embed"> <iframe src="..." allowfullscreen loading="lazy" referrerpolicy="no-referrer"></iframe> </div>
CSS关键点：
-
.map-embed { position: relative; width: 100%; padding-bottom: 75%; }（16:9比例） .map-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }- 禁用滚动：加
overflow: hidden到.map-embed，别依赖废弃的scrolling="no"
移动端白屏常因referrerpolicy缺失或HTTPS混载
iOS Safari 和部分安卓 WebView 对<iframe>的 referer 控制极严。百度地图在 iOS 上缺referrerpolicy="no-referrer"必白屏；Google Maps 在 HTTPS 页面加载 HTTP 资源（如旧版 embed 链接含http://）会被拦截。
检查项：
- 所有
src协议必须为https://，尤其注意百度地图旧文档里可能残留http://api.map.baidu.com - 务必显式声明
referrerpolicy="no-referrer"，Safari 15.4+ 才认这个值 - 本地开发不用
file://双击打开，起python3 -m http.server或 Live Server
JS SDK初始化前必须确保DOM就绪且容器尺寸可计算
用高德/百度/腾讯地图 JS API 时，new AMap.Map('map', {...})或new BMap.Map('map')失败，90%是因为容器<div id="map">还没渲染出来，或height: auto导致高度为0。
安全做法：
- 把初始化脚本放在
</body>前，或监听DOMContentLoaded - 容器必须有明确
width和height（不能是height: 100vh且父级没高） - 高德坐标顺序是
[lng, lat]，百度是[lng, lat]（BD09），腾讯是[lat, lng]（GCJ02）——传反了地图中心就飞到西伯利亚 - 百度AK需绑定
Referer，开发期可设*，上线前必须收紧到*.yourdomain.com
referrerpolicy或协议不匹配，灰图大概率是容器无高或坐标格式错，移动端双滚动条一定是没包响应式容器。这些点一漏，调试两小时也找不到根因。 
