百度地图JS API必须通过HTTPS或本地服务器(如Live Server)运行,禁用file://协议;须使用BMapGL.Map而非BMap.Map;定位需手动调用Geolocation并处理权限;AK须在script标签中携带且域名须在控制台白名单备案。

百度地图 JS API 必须用 https 协议加载
本地直接双击打开 HTML 文件(file:// 协议)会触发百度地图的跨域限制,地图容器空白、控制台报 Failed to load resource: net::ERR_FILE_NOT_FOUND 或 Access-Control-Allow-Origin 错误。必须通过本地服务器启动页面,比如用 VS Code 的 Live Server 插件、python3 -m http.server 8000,或部署到 Nginx/Apache。
BMapGL.Map 是新版 API 的核心构造函数,别再用老版 BMap.Map
百度地图已于 2022 年全面切换至 WebGL 渲染的 BMapGL 命名空间,旧版 BMap 已停用且无法获取新 key 权限。初始化时必须使用:
const map = new BMapGL.Map('map-container'); // 注意是 BMapGL.Map,不是 BMap.Map
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15);
若仍写 new BMap.Map(...),控制台会报 ReferenceError: BMap is not defined,即使引入了 SDK 也无效。
定位功能需显式调用 Geolocation.getCurrentPosition,且用户必须授权
百度地图本身不自动开启定位;需手动调用定位服务,并处理权限拒绝、定位失败等边界情况:
立即学习“前端免费学习笔记(深入)”;
-
Geolocation实例需传入{enableHighAccuracy: true}才可能返回 GPS 级精度(否则默认用 IP/基站粗略定位) - 用户首次访问会弹出浏览器级权限提示,拒绝后再次调用
getCurrentPosition不会重试,需引导用户手动开启 - 定位成功后,要用
map.panTo(new BMapGL.Point(lng, lat))移动视图,不能只靠centerAndZoom - 务必监听
onLocationSuccess和onLocationError回调,错误码1表示用户拒权,2表示定位超时
AK(密钥)必须在 script 标签 URL 中带上 ak=xxx,且域名已白名单备案
百度地图 JS API 调用强制校验 Referer,未配置白名单的域名会返回 401 Unauthorized,地图区域显示“请求来源不合法”。操作要点:
- 前往 百度地图开放平台控制台 创建 Web 服务密钥,勾选「JavaScript API」服务
- 在「Referer 白名单」中填入你的实际域名,如
localhost:8000、127.0.0.1:3000、yourdomain.com(注意端口、协议、路径都不能省) - 引入 SDK 的 script 标签必须带
ak参数:
漏掉 ak 或白名单不匹配,控制台会明确报错 INVALID_REFERER —— 这是最常卡住新手的地方。











