iframe嵌入地图必须用官方生成的带关键参数的链接：百度需output=html和合法uid，google需pb=参数；手动修改url、用搜索页链接或未编码中文地址均会导致白屏或报错；移动端需加referrerpolicy="no-referrer"和loading="lazy"，并用css控制滚动与响应式；js sdk则须注意域名绑定、坐标系转换（bd-09/gcj-02/wgs-84）及id唯一性。
直接用 <iframe></iframe> 嵌入地图最省事，但百度和 Google 的嵌入代码不能混用、不能手改 URL、也不能直接贴浏览器地址栏链接——否则白屏、报错或唤不起 App。
为什么 iframe src 一改就失效？
地图服务商生成的嵌入链接里藏着关键参数，比如百度必须带 output=html，Google 必须含 embed=1 或完整 pb= 参数串。手动删掉、补错、或拿 https://map.baidu.com/?q=xxx 这种搜索页 URL 去套 <iframe></iframe>，浏览器会直接拒绝加载（控制台报 Refused to display 'https://map.baidu.com/' in a frame）。
- 百度地图：必须从 map.baidu.com 搜索后点「分享」→「嵌入网页」复制整段代码，
src中要有output=html和合法uid或newmap=1 - Google 地图：必须点标记右下角「⋯」→「共享或嵌入地图」→ 切到「嵌入地图」标签再复制，
src开头是https://www.google.com/maps/embed?pb=，不是/maps?q= - 中文地址没做 URL 编码？别硬塞，先用
encodeURIComponent("北京市朝阳区")处理，否则链接 400 或定位偏移
移动端 iframe 白屏或双滚动条怎么修？
iOS Safari 和部分安卓 WebView 对 <iframe></iframe> 的 referrer 和手势支持敏感，不加属性容易白屏；而默认 scrolling="no" 已被废弃，不处理就会出现外层页面+内嵌地图双滚动条。
- 必须加
referrerpolicy="no-referrer"，尤其百度地图在 iOS 上缺这个必白屏 - 加
loading="lazy"，既提速又防首屏卡顿 - 设固定宽高（如
width="100%" height="400"），再用 CSS 包一层响应式容器，避免用height: 100vh这类可能溢出的写法 - 真要禁滚动，靠 CSS：
iframe { overflow: hidden; }，而不是过时的 HTML 属性
想加标记或响应点击？别硬改 iframe
<iframe></iframe> 是个黑盒，你没法往里面 JS 注入事件监听，也没法动态加 Marker。这时候必须切到 JS SDK 路线，但注意几个硬性约束：
- 百度 API 的
ak和高德的key必须绑定域名，file://本地打开直接失败 - 坐标系别搞混：百度用
bd-09，高德/腾讯用gcj-02，GPS 设备原始数据是wgs-84—— 直接丢经纬度进去，点会偏几百米 - 高德 SDK 必须用
AMap.plugin加载模块，哪怕只初始化地图，也不能new AMap.Map()后立刻执行，否则报AMap is not defined - 多个地图实例共存？每个
<div id="map1">、<code><div id="map2"> ID 必须唯一，复用 ID 会导致后一个覆盖前一个 <p>最常被忽略的是 referer 校验和坐标系转换——前者让地图在测试环境好好的，一上生产就白屏；后者让标记明明写了“北京西站”，结果钉在了丰台区农田里。</p> </div>
