AI编程助手效率革命：用Skills项目定制专属开发上下文
2026/6/30 3:13:10
需求：
前端对接百度地图只需四样：①去百度地图开放平台注册拿 AK 密钥；②页面放一个带 id 且有明确宽高的 <div> 容器；③用 <script> 标签引入百度地图 JS 库（地址里带上 AK）；④三行 JS：new BMapGL.Map("容器id") 创建地图 → new BMapGL.Point(经度, 纬度) 设中心点 → map.centerAndZoom(点, 缩放级别) 显示地图。不需装包、不需后端、完全免费，纯浏览器端运行。换 AK + 改经纬度就能直接用。
如何对接百度地图
前期准备：
1️⃣ 注册百度账号
- 访问百度地图开放平台
- 用百度账号登录（没有就先注册一个）
2️⃣ 申请 AK 密钥（地图的"钥匙"）
- 登录后进入控制台
- 点应用管理 → 我的应用 → 创建应用
- 填写信息：
- 应用类型：选「浏览器端」
- Referer 白名单：填
*（本地练习用，线上填域名）
- 提交后会看到一串字母数字 →这就是 AK，复制保存好！
3️⃣ 准备一个 HTML 文件
- 桌面新建一个
map.html文件 - 用HBuilderX或者Go等其他编辑器，准备写代码
代码实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的百度地图</title> <style> /* 让地图充满整个屏幕 */ html, body, #ditu { width: 100%; height: 100%; margin: 0; padding: 0; } </style> <!-- ⬇️ 引入百度地图，把 "你的AK" 换成刚才申请的那串密钥 --> <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的AK"></script> </head> <body> <!-- ⬇️ 这是地图的"画框" --> <div id="ditu"></div> <script> // 1. 创建地图（画在 id="ditu" 的盒子里） var ditu = new BMapGL.Map("ditu"); // 2. 定一个中心点（这里是北京天安门，格式：经度, 纬度） var zhongxin = new BMapGL.Point(116.404, 39.915); // 3. 把地图显示出来（15 是放大级别，3-21 之间） ditu.centerAndZoom(zhongxin, 15); // 4. 允许鼠标滚轮放大缩小 ditu.enableScrollWheelZoom(true); // 5. 在中心点放一个小旗子 var xiaoqizi = new BMapGL.Marker(zhongxin); ditu.addOverlay(xiaoqizi); // 6. 点击小旗子弹个信息框 xiaoqizi.addEventListener("click", function () { var tishi = new BMapGL.InfoWindow("📍 这里就是天安门！", { width: 200, height: 60 }); ditu.openInfoWindow(tishi, zhongxin); }); </script> </body> </html>如何测试：
步骤 1：保存文件
- 保存好
map.html
步骤 2：打开文件
- 双击
map.html，用浏览器打开（推荐用 Chrome）
步骤 3：查看效果
- 🎉 如果一切正常，你应该能看到一个完整的地图
- 地图中心是北京天安门，上面有一个小旗子
- 点击小旗子会弹出"这里就是天安门"的提示框
步骤 4：测试小功能
- 鼠标滚轮滚动 → 地图应该能放大缩小
- 按住鼠标左键拖动→ 地图可以平移
- 击小旗子→ 弹出信息框