网页嵌入百度地图API完整教程

百度地图JavaScript API已全面停止新账号注册和AK申请，旧AK仅限存量项目维持调用且接口严重受限（如地理编码频繁失败、路线规划返回空数据），常见报错“BMap is not defined”多因SDK未加载或AK失效，容器空白往往源于CSS宽高缺失或DOM隐藏导致渲染异常；当前嵌入百度地图的核心难点早已从技术实现转向政策合规与服务稳定性，对新项目而言，优先考虑静态图+坐标缓存或迁移到高德等仍开放的替代方案，反而更高效可靠。

百度地图 JavaScript API 不再开放新账号注册，2023 年起全面停用密钥申请服务。你现在无法通过官方渠道获取新的 ak（Access Key），旧 ak 也仅限存量项目维持调用，且部分接口（如地理编码、路线规划）已限频或返回空数据。

为什么 initMap 报错 “BMap is not defined”

这是最常见现象，本质是 SDK 加载失败或时机错误：

• 未在 HTML 中正确引入百度地图 JS 文件——必须使用 https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK，注意 v=3.0 是当前唯一可用版本，v=2.0 已下线
• ak 无效或过期：控制台会报 INVALID_REQUEST 或 KEY_EXPIRED，但脚本仍会加载，只是后续所有 API 调用静默失败
• 地图初始化代码执行早于 SDK 加载完成：不能直接写 initMap()，必须等 window.BMap 存在或监听 load 事件

推荐写法：

<script src="https://api.map.baidu.com/api?v=3.0&ak=your_ak_here"></script>
<script>
window.initMap = function() {
  if (!window.BMap) return;
  const map = new BMap.Map("container");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
};
// 确保 DOM 就绪 + SDK 就绪
document.addEventListener('DOMContentLoaded', () => {
  if (window.BMap) initMap();
  else setTimeout(() => window.initMap && initMap(), 500);
});
</script>

BMap.Geocoder 返回空结果或 status: 1

地理编码（地址转坐标）接口实际已不可靠，status: 1 表示“服务器内部错误”，不是你参数问题：

• 百度对非白名单域名的 geocoding/v3/ 接口做了严格 referer 校验，即使 ak 正确也会拦截
• 返回 {status: 0, result: []} 很可能是地址格式不规范，比如含空格、全角字符、省市区层级缺失（必须写“北京市朝阳区建国路87号”，不能只写“建国路87号”）
• 替代方案更现实：改用高德 Web API（需注册，但目前开放新账号）、或本地缓存常用地址的坐标（如城市中心点），避免实时请求

地图容器显示空白但无报错

这通常不是 API 问题，而是 CSS 或 DOM 渲染导致：

• 没设宽高：百度地图要求容器有明确像素尺寸，height: 100% 无效，必须写 height: 400px 或类似固定值
• 父级元素被 display: none 或 visibility: hidden 隐藏过：地图初始化后若容器曾隐藏，需手动触发 map.centerAndZoom() 或 map.refresh()
• 页面用了 CSS-in-JS 或 Shadow DOM：BMap 依赖全局 document.body 插入图层，某些框架（如 Vue 3 + ShadowRoot）会导致地图控件渲染到页面外

现在嵌入百度地图真正的难点不在代码，而在 ak 的有效性、接口稳定性与政策合规性。如果你的项目刚启动，优先评估是否真的需要百度地图——多数场景下，用静态图（https://api.map.baidu.com/staticimage?）+ 坐标预存，比硬扛 JS API 更省心。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~