用 嵌入在线地图是最常用、最稳定的方式，需使用地图平台提供的分享嵌入代码而非浏览器地址栏url；注意编码中文参数、添加loading="lazy"和referrerpolicy="no-referrer"，移动端需适配触摸与宽高比，无需api key。
怎么用 <iframe></iframe> 嵌入在线地图（最常用、最稳）
绝大多数人想在网页里放个地图，其实不是自己画地图，而是调用高德、百度、腾讯或 Google 的现成地图页面。直接用 <iframe></iframe> 是最快、兼容性最好、不用写 JS 的方式。
常见错误是把地图 URL 当成图片地址往 <img alt="HTML怎么插入地图_HTML embed地图教程【地理】" > 里塞——浏览器会报错，或者只显示一个空白框。
使用场景：企业官网“联系我们”页、活动落地页、内部系统简易定位展示。
要点：
立即学习“前端免费学习笔记（深入）”；
- 必须用地图平台提供的「分享嵌入代码」，不是随便复制浏览器地址栏的 URL（后者通常带登录态或临时参数，嵌入后 403 或白屏）
- 百度地图生成的
<iframe></iframe>默认带scrolling="no"，但现代浏览器已忽略该属性，建议显式加loading="lazy"提升首屏性能 - 高德地图 iframe 的
src中若含中文地址，必须确保 URL 已被encodeURIComponent()编码，否则加载失败且无提示
示例（百度地图嵌入北京中关村）：
<iframe width="600" height="450" frameborder="0" src="https://map.baidu.com/?newmap=1&ie=utf-8&lang=zh&latlng=39.989612,116.314788&title=%E4%B8%AD%E5%85%B3%E6%9D%91&mode=marker"></iframe>
为什么不能直接用 fetch + GeoJSON 渲染地图
有人看到“前端地理可视化”就本能想用 fetch 拉坐标数据，再用 Leaflet 或 Mapbox GL JS 渲染——这没错，但和“HTML 插入地图”根本不是一回事。
容易踩的坑：
- 地图瓦片服务（如 Mapbox、天地图）有明确的跨域限制，直接
fetch瓦片图片会触发 CORS 错误，浏览器直接拦截 -
GeoJSON只是地理要素数据，没有底图、缩放控件、手势支持；光有它，页面上啥也看不到 - 自建地图渲染链路（坐标系转换 + 投影 + 切片请求 + canvas/svg 绘制）复杂度远超预期，连经纬度 WGS84 和 GCJ02 的偏移校正都得手动处理
所以，除非你明确需要自定义样式、离线运行、或叠加大量动态矢量图层，否则别一上来就碰 Leaflet。
iframe 地图在移动端打不开？检查这三点
最常被忽略的是响应式适配和平台策略变更：
- 百度地图 iframe 在 iOS Safari 中可能因
referrerpolicy="no-referrer"缺失导致加载中断（表现为白屏+控制台报 “Refused to load...”），需在<iframe></iframe>标签中补上该属性 - 腾讯地图 iframe 默认禁用触摸缩放，需在
src后追加&touch=1参数（例如：<a href="https://www.php.cn/link/83db1518c5bd4e9bf12fdf97de0d29fc">https://www.php.cn/link/83db1518c5bd4e9bf12fdf97de0d29fc</a>） - 所有主流地图 iframe 都不支持
width="100%"+height="100vh"同时生效（尤其在微信内置浏览器），稳妥做法是固定高度（如height="400px"）或用 CSS aspect-ratio 控制宽高比
高德/百度地图 API Key 还要不要填
现在用 <iframe></iframe> 嵌入，不需要你申请或填写 API Key。
因为 iframe 加载的是对方公开的 H5 页面，走的是用户浏览器直连，不是你服务器代请求。API Key 是给 JS SDK（如 AMap.Map）或后端调用 REST API 用的。
但注意两个例外：
- 如果你在 iframe
src里拼了callback=xxx或plugin=xxx这类非标准参数，某些版本会退化为 API 模式并要求 key，结果加载失败 - 百度地图 iframe 若启用了“路线规划”功能（
&mode=driving），部分区域会静默触发 API 调用，超量后 iframe 内地图变灰+提示“配额不足”
这事说清了就结束。
