HTML5本身不提供地图功能，需通过引入高德、百度等第三方地图SDK实现；推荐高德因其中文文档友好、免费额度足且无需企业认证，但须注意密钥配置、容器样式及HTTPS部署等细节。
HTML5 本身不提供地图功能，所谓“HTML5 调用地图”其实是用 HTML5 页面（<html>）加载第三方地图 SDK，比如高德、百度或腾讯地图的 JavaScript API。新手能上手，但必须清楚：不是写几个 HTML 标签就能出地图，关键在引入 SDK、申请密钥、写 JS 初始化逻辑。
为什么直接写 <iframe> 嵌入地图不推荐？
很多新手搜到用 <iframe src="https://map.baidu.com"> 的方式，这确实能显示地图，但问题明显：
- 无法自定义标记点、绘制路线、监听点击事件
- 移动端缩放/手势支持差，常被禁止嵌入或加水印
- URL 参数受限，比如不能动态传入经纬度并自动居中
- 不符合“调用地图 API”的实际开发需求（比如查周边、逆地理编码）
高德地图 JS API 新手三步跑通最简示例
选高德是因为文档中文友好、免费额度够用、不需要企业认证即可获取 Key。前提是你的页面已部署（本地 file:// 协议会跨域失败）。
步骤如下：
立即学习“前端免费学习笔记（深入）”；
- 去 高德开放平台 注册账号 → 创建应用 → 获取
Web端 Key - 在 HTML 中按顺序引入：先
<script src="https://webapi.amap.com/maps?v=2.0&key=你的KEY">，再写初始化代码 - 确保容器有固定宽高（比如
style="width: 600px; height: 400px;"），否则地图 div 渲染为空白
最小可运行代码片段：
<div id="container" style="width: 600px; height: 400px;"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=your_key_here"></script>
<script>
const map = new AMap.Map('container', {
center: [116.397428, 39.90923], // 北京天安门
zoom: 13
});
</script>
百度地图 API 常见报错：Uncaught ReferenceError: BMapGL is not defined
这是百度地图 v3.0+ 默认启用 WebGL 版（BMapGL），但新手常复制老教程里的 BMap（2.x 版本），导致对象找不到。解决方法只有两个：
- 明确使用 WebGL 版：引入
https://api.map.baidu.com/api?v=3.0&ak=你的AK，然后用new BMapGL.Map(...) - 退回兼容版：强制指定
v=2.0，但放弃 3D 建筑、室内图等新特性 - 注意：百度现在要求域名必须在控制台「应用管理」里备案，localhost 默认允许，但
127.0.0.1或其他 IP 需手动添加
真正卡住新手的往往不是语法，而是密钥没开对应服务（比如忘了勾选“JavaScript API”）、HTTP/HTTPS 混合加载被浏览器拦截、或者地图容器没有设置 position: relative 导致控件错位。这些细节比学 API 更影响第一眼能否看到地图。
