要使用百度地图API，首先需要完成一系列准备工作，包括申请开发者账号、创建应用获取密钥、理解API服务类型及计费规则，然后通过代码调用接口实现地图功能,以下是详细步骤和注意事项：
准备工作
-
注册百度地图开放平台账号
访问百度地图开放平台官网（lbsyun.baidu.com），点击“注册”完成个人或企业账号注册，登录后进入“控制台”,这是管理API密钥和应用的核心界面。 -
创建应用获取AK（Access Key）
在控制台左侧菜单选择“应用管理”→“我的应用”→“创建应用”，填写应用名称（如“我的地图应用”），选择应用类型（Web端、Android、iOS等），并根据需求勾选需要的服务（如地图JavaScript API、Web服务API等），提交后，系统会生成AK（Access Key），这是调用API的身份凭证,需妥善保存。 -
理解服务类型与计费规则
百度地图API主要分为三类：- 地图JavaScript API：用于在网页中嵌入交互式地图，支持标注、覆盖物、路线规划等前端功能。
- Web服务API：提供地理编码（地址坐标转换）、逆地理编码（坐标地址转换）、周边搜索等后端服务接口。
- SDK/API服务：如Android/iOS SDK、定位API等，适用于移动端开发。
部分服务免费（如JavaScript API每日调用量6万次），部分按量计费（如Web服务API），需在控制台“服务管理”中开通对应服务并查看配额。
地图JavaScript API调用示例
基础地图展示
在HTML文件中引入百度地图API脚本，替换YOUR_AK为实际密钥：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">百度地图示例</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
<style>
#map { width: 100%; height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 初始化中心点坐标（北京天安门）
map.centerAndZoom(point, 15); // 设置中心点坐标和地图缩放级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>
</body>
</html>
说明：BMap.Map为地图容器类，BMap.Point为坐标点类，缩放级别（1-19）越大显示越详细。
添加标注与覆盖物
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图
var infoWindow = new BMap.InfoWindow("天安门广场"); // 信息窗口
marker.addEventListener("click", function(){ // 点击标注触发事件
map.openInfoWindow(infoWindow, point);
});
var circle = new BMap.Circle(point, 500, { // 圆形覆盖物
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.3,
fillColor: "red",
fillOpacity: 0.1
});
map.addOverlay(circle);
路线规划
var driving = new BMap.DrivingRoute(map, { // 驾车路线规划
renderOptions: { map: map, panel: "result" },
onSearchComplete: function(results){
if(driving.getStatus() === BMAP_STATUS_SUCCESS){
var plan = results.getPlan(0);
console.log("总距离：" + plan.getDistance() + "米");
}
}
});
driving.search("天安门", "故宫"); // 起终点地址
注意：需在HTML中添加<div id="result"></div>显示路线结果。
Web服务API调用示例（以地理编码为例）
地理编码将地址转换为坐标,需通过HTTP请求调用：
// 使用fetch API调用（需后端环境，浏览器直接调用可能跨域）
fetch("https://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output=json&ak=YOUR_AK&callback=showLocation")
.then(response => response.json())
.then(data => {
if(data.status === 0){
console.log("坐标：" + data.result.location.lng + "," + data.result.location.lat);
}
});
// JSONP方式（前端直接调用）
function showLocation(data){
if(data.status === 0){
console.log("坐标：" + data.result.location.lng + "," + data.result.location.lat);
}
}
var script = document.createElement("script");
script.src = "https://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output=json&ak=YOUR_AK&callback=showLocation";
document.body.appendChild(script);
常见问题与调试
- AK无效或超配额：检查AK是否正确、对应服务是否开通、是否超出日调用量限制。
- 地图不显示：确认AK是否正确替换、浏览器是否阻止脚本加载、容器是否有宽高样式。
- 坐标偏差：百度地图使用GCJ-02坐标系，与其他坐标系（如WGS84）需转换。
相关问答FAQs
问题1：百度地图API的免费额度如何计算？是否需要绑定银行卡？
解答：百度地图API提供不同服务的免费额度，例如地图JavaScript API每日6万次请求，Web服务API地理编码每日10万次，部分服务（如语音导航API）需付费，免费额度无需绑定银行卡，但超额后需升级至付费版本,此时需绑定企业认证的银行卡。
问题2：如何在移动端（Android/iOS）集成百度地图API？
解答：移动端需下载百度地图官方SDK（Android Studio或CocoaPods集成），配置密钥（Android在Manifest.xml中配置，iOS在AppDelegate中配置），例如Android端基础地图展示代码：
MapView mapView = findViewById(R.id.bmapView); mapView.getMap().setMapType(BaiduMap.MAP_TYPE_NORMAL); LatLng point = new LatLng(39.915, 116.404); MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(point); mapView.getMap().setMapStatus(msu);
需注意移动端需申请Android或iOS类型的AK，并配置SHA1签名（Android）或Bundle ID（iOS）。
