在网站中调用百度地图是许多开发者需要实现的功能,无论是展示店铺位置、导航指引还是地理信息可视化，百度地图提供的API都能满足需求，以下是详细的实现步骤、注意事项及代码示例，帮助开发者顺利完成地图集成。
（图片来源网络，侵删）
准备工作：获取百度地图API密钥
在调用百度地图之前,首先需要获取有效的API密钥（AK），具体步骤如下：
- 注册百度地图开放平台账号：访问百度地图开放平台官网，使用百度账号登录。
- 创建应用：进入“控制台”->“应用管理”->“创建应用”，选择应用类型（如“浏览器端”“服务端”等），填写应用名称，并设置Referer白名单（可选，用于限制调用API的域名）。
- 获取AK：创建成功后，系统会生成一个唯一的AK（Access Key），需妥善保存，后续调用API时需使用该密钥。
引入百度地图API
在HTML页面中,通过<script>标签引入百度地图JavaScript API，基本格式如下：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>
v=3.0：指定API版本，建议使用最新稳定版。ak=您的AK：替换为实际获取的密钥。
创建地图容器
在页面中定义一个<div>元素作为地图容器，并设置其样式（如宽度和高度）：
<div id="mapContainer" style="width: 100%; height: 500px;"></div>
初始化地图
通过JavaScript代码初始化地图实例,并设置中心点坐标和缩放级别：
（图片来源网络，侵删）
var map = new BMap.Map("mapContainer"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 定义中心点坐标（北京天安门）
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
添加地图控件
百度地图提供了多种控件,如缩放控件、比例尺控件、定位控件等，可通过以下方式添加：
map.addControl(new BMap.NavigationControl()); // 添加缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.GeolocationControl()); // 添加定位控件
标注点与信息窗口
- 添加标注点：
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"}
}
]
});
地理编码与逆地理编码
- 地址转坐标（地理编码）：
var myGeo = new BMap.Geocoder(); myGeo.getPoint("北京市海淀区中关村", function(point){ if(point){ map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); } }, "北京市"); - 坐标转地址（逆地理编码）：
var point = new BMap.Point(116.404, 39.915); myGeo.getLocation(point, function(result){ if(result){ alert(result.address); } });
注意事项
- AK安全：避免将AK暴露在公共代码中，建议通过服务端代理或使用白名单限制域名。
- API配额：百度地图API有调用次数限制，超出后需升级服务。
- 浏览器兼容性：确保代码兼容主流浏览器（如Chrome、Firefox、Edge等）。
- HTTPS支持：生产环境建议使用HTTPS协议调用API。
完整示例代码
以下是一个完整的HTML页面示例,展示基础地图功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">百度地图示例</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>
<style>
#mapContainer{width:100%;height:500px;}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script>
var map = new BMap.Map("mapContainer");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var infoWindow = new BMap.InfoWindow("欢迎来到北京天安门！");
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, point);
});
</script>
</body>
</html>
相关问答FAQs
问题1：百度地图API调用次数超限怎么办？
解答：百度地图API有免费调用配额（如浏览器端每日6万次），若超限，可登录控制台升级服务套餐，或优化代码减少无效调用（如缓存地理编码结果）。
（图片来源网络，侵删）
问题2：如何实现地图上多个标注点的批量添加？
解答：可通过数组存储坐标和标注信息，遍历数组逐个添加标注点，示例代码如下：
var points = [
{lng: 116.404, lat: 39.915, title: "天安门"},
{lng: 116.397, lat: 39.909, title: "故宫"}
];
points.forEach(function(item){
var point = new BMap.Point(item.lng, item.lat);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var infoWindow = new BMap.InfoWindow(item.title);
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, point);
});
}); 
