一、准备工作：获取 AK（密钥）

1. 登录 百度地图开放平台，进入「控制台」。
2. 左侧导航栏选择「应用管理」→「我的应用」→「创建应用」。
3. 填写应用名称，选择「应用类型」为「浏览器端」，设置「Referer 白名单」（本地测试可填 *，生产环境需填写具体域名，如 *.example.com）。
4. 创建成功后，即可获取该应用的 AK（一串字符串，如 he3lfRimPC9lxYqrVzf6LechChCyPCcb）。

二、引入百度地图 API 脚本

• v=1.0：API 版本
• type=webgl：指定为 WebGL 版（支持 3D 效果，性能更好）
• ak=你的AK：替换为第一步获取的 AK

三、基础地图初始化

1. 创建地图容器

在 HTML 中添加一个用于显示地图的div容器，并设置宽高（必须设置，否则地图不显示）：

2. 初始化地图核心代码

通过 JS 初始化地图，设置中心点、缩放级别等：

四、常用功能实现

1. 添加标记（Marker）

在地图上添加自定义标记（如用户位置、兴趣点）：

3. 自定义地图样式（隐藏商铺 / 修改配色）

1. 登录百度地图开放平台→「我的地图」→「样式管理」→「创建样式」，在编辑器中调整：
   • 隐藏 POI（商铺、餐饮等）：在「POI」分类中关闭对应类型的「可见性」。
   • 修改配色：调整「道路」「背景」「区域」的颜色。
2. 保存并「发布」样式，获取 styleId。
3. 在代码中应用样式：

. 定位当前位置

五、常见问题排查

1. 地图不显示：
   • 检查容器是否设置了width和height。
   • 检查 AK 是否有效（控制台→「我的应用」查看状态）。
   • 打开浏览器控制台（F12→Console），查看是否有Invalid AK或Permission denied等错误。
2. 自定义样式无效：
   • 确认样式已「发布」（未发布的样式无法使用）。
   • 确认样式已绑定当前 AK（「样式管理」→ 样式详情→「绑定应用」）。
3. 标记不显示：
   • 检查图标路径是否正确（404 错误可在控制台 Network 面板查看）。
   • 确认标记的经纬度是否在地图可视范围内（可通过map.panTo(markerPoint)移动地图到标记位置）。

六、官方资源

• 百度地图 WebGL API 文档：完整 API 接口说明。
• 坐标拾取工具：获取地点经纬度。
• 示例中心：更多功能示例（如路线规划、热力图等）。