用 iframe 嵌入静态地图最简：直接复制 Google Maps 或高德地图分享页的 iframe 代码，设宽高像素值（如 width="600" height="400"）；示例高德：<iframe width="600" height="400" src="https://www.amap.com/embed?marker=116.48,39.99&zoom=14"></iframe>。
怎么用 iframe 快速嵌入静态地图（最简方案）
如果你只要在个人页面上显示一个固定位置的地图，比如“我家附近”或“公司地址”，iframe 是最快、最稳的方式，不用申请密钥、不写 JS、不处理跨域。
直接从 Google Maps 或高德地图复制分享链接里的 iframe 代码即可。注意两点：
- Google Maps 分享时要点「嵌入地图」→ 选「复制 HTML」，别只复制 URL；
- 高德地图需打开「分享」→「嵌入网页」→ 复制
<iframe>标签； - 粘贴到你的 HTML 文件中，
width和height建议设为具体像素（如width="600" height="400"），避免响应式错位。
示例（高德）：
<iframe width="600" height="400" src="https://www.amap.com/embed?marker=116.48,39.99&zoom=14"></iframe>
leaflet + 免费瓦片实现可交互地图（推荐自控方案）
想缩放、拖拽、加标记、换底图？用 leaflet 搭配 OpenStreetMap 免费瓦片，零成本、无密钥、轻量可控。
立即学习“前端免费学习笔记（深入）”；
关键步骤：
- 在
<head>中引入leaflet.css和leaflet.js（CDN 地址用官方最新版，如https://unpkg.com/leaflet@1.9.4/dist/leaflet.css）； - 在页面中放一个带
id的<div>，比如<div id="map" style="height: 400px;"></div>； - JS 里初始化地图：先
L.map('map')，再用L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png')加底图； - 最后用
L.marker([lat, lng]).addTo(map)加标记——注意经纬度顺序是[纬度, 经度]，不是 GPS 设备常见的“经度在前”。
调用高德/百度地图 API 需要哪些硬性准备
不是加个 script 标签就能用。真要用它们的 JS API，以下三件事缺一不可：
- 必须注册开发者账号并创建应用，获取
key（高德叫“Web 服务 key”，百度叫“AK”）； - 必须在控制台绑定你页面的域名（
localhost算合法调试域名，但上线后填错会直接白屏）； - 高德 API 的
AMap.Map初始化必须等容器 DOM 加载完成，否则报container is null；百度BMap.Map同样要求容器有明确宽高（不能是height: auto）。
常见错误：amap is not defined —— 没等 https://webapi.amap.com/maps?v=2.0&key=xxx 加载完就执行初始化；Invalid key —— key 复制漏了字符，或绑错了域名。
为什么不用 Google Maps JS API
它现在强制要求密钥+账单绑定，哪怕只是展示一张地图，一旦流量超免费额度（每月 $200 信用额），就会静默停用，页面地图变灰+报 Google Maps JavaScript API error: InvalidKeyMapError。
对个人页面来说，风险远大于收益。除非你明确需要 Street View、路线规划等独家能力，否则绕开更省心。
真正容易被忽略的是：地图容器的 CSS。无论用哪种方式，div#map 必须有**显式高度**（height: 400px 或 min-height），且父级不能是 display: flex 但没设 align-items，否则地图 canvas 渲染区域可能为 0。
