插件窝 干货文章 百度地图使用到的javascript函数是什么

百度地图使用到的javascript函数是什么

map JavaScript Point 坐标 879    来源:    2025-04-26

百度地图 JavaScript API 提供了丰富的功能接口,主要包含以下几类核心函数和对象:


1. 基础初始化函数

// 初始化地图实例
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()); // 添加导航控件

2. 地图操作函数

// 地图视图操作
map.setCenter(point);          // 设置中心点
map.setZoom(zoomLevel);        // 设置缩放级别
map.panTo(point);             // 平移到指定点

// 地图状态监听
map.addEventListener("click", function(e) {
    console.log("点击坐标:", e.point.lng, e.point.lat);
});

3. 覆盖物相关函数

// 添加标注(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);

4. 地理编码与逆编码

// 地址解析(地理编码)
var geoc = new BMap.Geocoder();
geoc.getPoint("北京市海淀区", function(point) {
    if (point) map.centerAndZoom(point, 16);
});

// 逆地址解析(坐标转地址)
geoc.getLocation(point, function(rs) {
    var address = rs.address;
});

5. 路线规划

// 驾车路线
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("起点", "终点");

6. 本地搜索与周边检索

// 本地搜索
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("酒店");

7. 工具类函数

// 计算两点距离
var distance = map.getDistance(point1, point2); // 返回米

// 坐标转换(如GPS转百度坐标)
BMap.Convertor.translate(gpsPoint, 0, function(baiduPoint) {
    map.addOverlay(new BMap.Marker(baiduPoint));
});

8. 热力图与可视化

// 热力图
var heatmap = new BMapLib.HeatmapOverlay({"radius": 20});
heatmap.setDataSet({data: points, max: 100}); // points为坐标数组
map.addOverlay(heatmap);

注意事项

  1. API密钥:需在引入脚本时添加AK(<script src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script>)。
  2. 异步加载:部分功能需监听BMAP_API_LOAD事件确保API加载完成。
  3. 坐标系:默认使用BD09坐标(国测局加密坐标),需注意与其他坐标系(如WGS84)的转换。

如需完整文档,可参考百度地图JavaScript API官方文档