HTML5嵌入百度地图定位方法

哈喽！今天心血来潮给大家带来了《HTML5嵌入百度地图定位教程》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

百度地图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 —— 这是最常卡住新手的地方。

本篇关于《HTML5嵌入百度地图定位方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！