要在网站中添加百度地图，可以通过多种方式实现，以满足不同场景的需求，如展示公司地址、提供导航服务或标注多个位置，以下是详细的步骤和注意事项,涵盖从基础嵌入到高级自定义的全流程。
准备工作
在添加百度地图前,需完成以下准备工作：
-
注册百度地图开放平台账号
访问百度地图开放平台官网（https://lbsyun.baidu.com/），使用百度账号登录或注册新账号，账号注册完成后，需完成企业或个人实名认证,认证通过后才能使用地图服务。 -
创建应用获取密钥（AK）
登录平台后，进入“控制台”→“应用管理”→“我的应用”，点击“创建应用”，选择应用类型（如“浏览器端”“服务端”“小程序”等），填写应用名称（如“公司官网地图”）并设置域名白名单，若网站域名为www.example.com，则在白名单中添加http://www.example.com和https://www.example.com，确保地图只能在授权域名下加载，创建成功后，获取访问密钥（AK）,这是调用百度地图API的关键凭证。
基础地图嵌入（适合简单展示）
对于仅需展示固定地址的场景,可直接通过百度地图生成嵌入代码：
-
搜索地址并生成代码
访问百度地图官网（https://map.baidu.com/），搜索目标地址（如“北京市朝阳区xxx路xxx号”），点击右上角“分享”按钮，选择“嵌入地图”，调整地图尺寸（宽度和高度，建议宽度不超过100%以保证响应式布局）,复制生成的iframe代码。 -
将代码添加到网站
登录网站后台，进入需要添加地图的页面编辑器（如WordPress的“编辑页面”功能），切换到“文本”模式，将复制的iframe代码粘贴到指定位置，若使用HTML编辑器，可直接在<body>标签内的目标位置插入代码。<iframe src="https://map.baidu.com/@/searchwd/%E5%8C%97%E4%BA%AC%E5%B8%82%E6%9C%9D%E9%98%B3%E5%8C%BAxxx%E8%B7%AFxxx%E5%8F%B7?querytype=s&wd=%E5%8C%97%E4%BA%AC%E5%B8%82%E6%9C%9D%E9%98%B3%E5%8C%BAxxx%E8%B7%AFxxx%E5%8F%B7&c=1&src=0&signature=xxx&width=100%&height=500" width="100%" height="500" frameborder="0" scrolling="no" allowfullscreen></iframe>
保存页面后,网站即可显示该地址的百度地图。
使用百度地图JavaScript API（自定义功能）
如需自定义地图样式、添加标记点、信息窗口或交互功能，需通过JavaScript API实现：
-
引入API文件
在网站HTML文件的<head>标签内添加百度地图API引用，替换YOUR_AK为实际获取的密钥：<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
-
创建地图容器
在<body>标签内创建一个<div>元素作为地图容器，并设置样式（如宽度、高度、边框等）：<div id="map" style="width: 100%; height: 500px;"></div>
-
初始化地图
在<script>标签内编写JavaScript代码,初始化地图并设置中心点和缩放级别：var map = new BMap.Map("map"); // 创建Map实例 var point = new BMap.Point(116.404, 39.915); // 设置中心点坐标（示例为北京天安门） map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); // 添加缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 -
添加标记点和信息窗口
若需标注特定位置,可添加标记点并绑定信息窗口：var marker = new BMap.Marker(point); // 创建标记点 map.addOverlay(marker); // 将标记点添加到地图 var infoWindow = new BMap.InfoWindow("这里是公司地址，欢迎来访！"); // 创建信息窗口内容 marker.addEventListener("click", function(){ // 点击标记点触发事件 map.openInfoWindow(infoWindow, point); // 打开信息窗口 }); -
自定义地图样式
可通过JSON配置自定义地图样式，map.setMapStyle({styleJson: [ {featureType: "water", elementType: "all", stylers: {color: "#044161"}} ]});
使用百度地图HTML5组件（移动端适配）
针对移动端网站，可使用百度地图HTML5组件,支持触屏缩放和定位：
-
引入HTML5组件API
在<head>标签内添加：<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK&product=webgl"></script>
-
创建地图容器并初始化
与JavaScript API类似，但需使用BMapGL.Map初始化：var map = new BMapGL.Map("map"); map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15); map.enableScrollWheelZoom(true); // 启用滚轮缩放
注意事项
-
API调用限制
百度地图API有免费调用额度（如浏览器端AK每日调用次数上限），超出后需升级至付费套餐，可在控制台“服务管理”中查看用量和计费详情。 -
域名白名单配置
确保AK的域名白名单配置正确，否则地图无法加载，测试时需同时添加http和https协议，以及本地测试域名（如localhost）。 -
坐标偏移问题
百度地图使用BD-09坐标系，若需与其他地图服务（如高德、谷歌）的坐标互转,可通过百度坐标转换API实现。 -
响应式设计
地图容器建议使用百分比宽度（如width: 100%），并设置固定高度（如height: 400px）,避免在不同设备上显示异常。
常见问题解决方案
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 地图无法显示，提示“invalid domain” | AK的域名白名单未配置或配置错误 | 登录百度地图开放平台，检查应用中的域名白名单是否包含当前网站域名 |
| 地图加载缓慢 | API密钥错误或网络问题 | 确认AK正确，检查网络连接，或尝试更换API节点 |
相关问答FAQs
Q1: 如何在百度地图上添加多个标记点并显示不同信息？
A1: 可通过循环遍历坐标数组，为每个坐标创建标记点和对应的信息窗口，示例代码如下：
var points = [
{lng: 116.404, lat: 39.915, title: "门店1"},
{lng: 116.405, lat: 39.916, title: "门店2"}
];
points.forEach(function(point){
var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));
map.addOverlay(marker);
var infoWindow = new BMap.InfoWindow(point.title);
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, marker.getPosition());
});
});
Q2: 如何获取百度地图的驾车或步行路线规划？
A2: 使用百度地图的BMap.DrivingRoute或BMap.WalkingRoute服务，示例代码如下（驾车规划）：
var driving = new BMap.DrivingRoute(map);
driving.search(new BMap.Point(116.404, 39.915), new BMap.Point(116.407, 39.918));
driving.setSearchCompleteCallback(function(){
if(driving.getStatus() === BMAP_STATUS_SUCCESS){
map.addOverlay(driving.getPlan(0).getRoute(0)); // 绘制路线
}
}); 
