前端对接百度地图

需求前端对接百度地图只需四样①去百度地图开放平台注册拿 AK 密钥②页面放一个带 id 且有明确宽高的 div 容器③用 script 标签引入百度地图 JS 库地址里带上 AK④三行 JSnew 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 charsetutf-8 / title我的百度地图/title style /* 让地图充满整个屏幕 */ html, body, #ditu { width: 100%; height: 100%; margin: 0; padding: 0; } /style !-- ⬇️ 引入百度地图把 你的AK 换成刚才申请的那串密钥 -- script srchttps://api.map.baidu.com/api?v1.0typewebglak你的AK/script /head body !-- ⬇️ 这是地图的画框 -- div idditu/div script // 1. 创建地图画在 idditu 的盒子里 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测试小功能鼠标滚轮滚动 → 地图应该能放大缩小按住鼠标左键拖动→ 地图可以平移击小旗子→ 弹出信息框效果