Skip to content

基础概念 ​

本文档将介绍百度地图 JavaScript API GL 版本中的一些基础概念,帮助您更好地理解和使用 API。

命名空间 ​

百度地图 JavaScript API GL 版本使用 BMapGL 作为命名空间,所有的类和对象都在这个命名空间下。例如:

javascript
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404, 39.915);

坐标体系 ​

百度地图使用经纬度坐标系统,通过 Point 类表示一个地理坐标点:

javascript
// 创建一个坐标点(经度,纬度)
var point = new BMapGL.Point(116.404, 39.915);

地图控件 ​

地图控件是地图上的一些辅助工具,包括:

  • 平移缩放控件:ZoomControl
  • 比例尺控件:ScaleControl
  • 3D 导航控件:NavigationControl3D
  • 定位控件:LocationControl
  • 地图类型控件:MapTypeControl

覆盖物 ​

覆盖物是添加在地图上的标注、线段、多边形等对象:

  • 点标注:Marker
  • 信息窗口:InfoWindow
  • 折线:Polyline
  • 多边形:Polygon
  • 圆形:Circle

事件系统 ​

百度地图提供了丰富的事件处理机制,可以监听地图、覆盖物等对象的各种事件:

javascript
// 监听地图点击事件
map.addEventListener('click', function(e) {
    console.log('点击位置:', e.latlng);
});

// 监听标注点击事件
marker.addEventListener('click', function() {
    console.log('标注被点击');
});

自定义样式 ​

可以通过 setMapStyleV2 方法自定义地图的显示样式:

javascript
map.setMapStyleV2({
    styleJson: [
        {
            "featureType": "all",
            "elementType": "all",
            "stylers": {
                "lightness": 10,
                "saturation": -100
            }
        }
    ]
});

3D 视角 ​

GL 版本支持 3D 视角展示,可以通过以下方法控制:

javascript
// 设置地图倾斜角度
map.setTilt(60);

// 设置地图旋转角度
map.setHeading(45);

图层 ​

地图支持多种图层叠加:

  • 瓦片图层:TileLayer
  • 自定义图层:CustomLayer
  • 3D 建筑图层:Building3DLayer
  • 热力图图层:HeatmapLayer

下一步 ​

基于 MIT 许可发布