百度地图 JavaScript API 提供了丰富的功能接口,主要包含以下几类核心函数和对象:
// 初始化地图实例
var map = new BMap.Map("containerId"); // "containerId"为HTML元素ID
// 设置中心点和缩放级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 北京坐标, 缩放15级
// 启用控件(缩放、平移等)
map.enableScrollWheelZoom(); // 启用滚轮缩放
map.addControl(new BMap.NavigationControl()); // 添加导航控件
// 地图视图操作
map.setCenter(point); // 设置中心点
map.setZoom(zoomLevel); // 设置缩放级别
map.panTo(point); // 平移到指定点
// 地图状态监听
map.addEventListener("click", function(e) {
console.log("点击坐标:", e.point.lng, e.point.lat);
});
// 添加标注(Marker)
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 添加信息窗口(InfoWindow)
var infoWindow = new BMap.InfoWindow("内容");
marker.addEventListener("click", function() {
map.openInfoWindow(infoWindow, point);
});
// 添加折线、多边形
var polyline = new BMap.Polyline([point1, point2], {strokeColor: "red"});
map.addOverlay(polyline);
// 地址解析(地理编码)
var geoc = new BMap.Geocoder();
geoc.getPoint("北京市海淀区", function(point) {
if (point) map.centerAndZoom(point, 16);
});
// 逆地址解析(坐标转地址)
geoc.getLocation(point, function(rs) {
var address = rs.address;
});
// 驾车路线
var driving = new BMap.DrivingRoute(map, {
onSearchComplete: function(results) {
var plan = results.getPlan(0);
map.addOverlay(new BMap.Polyline(plan.getRoute(0).getPath()));
}
});
driving.search("起点", "终点");
// 本地搜索
var local = new BMap.LocalSearch(map, {
onSearchComplete: function(results) {
for (var i = 0; i < results.getNumPois(); i++) {
console.log(results.getPoi(i).title);
}
}
});
local.search("餐厅");
// 周边检索
var nearby = new BMap.NearbySearch(map, {radius: 1000});
nearby.search("酒店");
// 计算两点距离
var distance = map.getDistance(point1, point2); // 返回米
// 坐标转换(如GPS转百度坐标)
BMap.Convertor.translate(gpsPoint, 0, function(baiduPoint) {
map.addOverlay(new BMap.Marker(baiduPoint));
});
// 热力图
var heatmap = new BMapLib.HeatmapOverlay({"radius": 20});
heatmap.setDataSet({data: points, max: 100}); // points为坐标数组
map.addOverlay(heatmap);
<script src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>
)。BMAP_API_LOAD
事件确保API加载完成。如需完整文档,可参考百度地图JavaScript API官方文档。