快速开始
百度地图 JavaScript API GL 版本是一套由百度地图开发的基于 WebGL 技术的地图渲染引擎，同时适用于移动端和 PC 端。它支持 3D 视角展示，提供丰富的地图交互能力和可视化效果。
引入地图
在页面中引入百度地图 API 文件：
html
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>创建地图容器
在页面中创建一个用于承载地图的 DOM 容器：
html
<div id="container" style="width: 100%; height: 100vh;"></div>初始化地图
使用 JavaScript 代码初始化地图：
javascript
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);添加控件
向地图添加常用控件：
javascript
// 添加缩放控件
map.addControl(new BMapGL.ZoomControl());
// 添加比例尺控件
map.addControl(new BMapGL.ScaleControl());
// 添加导航控件
map.addControl(new BMapGL.NavigationControl3D());添加标注
在地图上添加一个标注点：
javascript
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);完整示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BMapGL Hello World</title>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
// 添加控件
map.addControl(new BMapGL.ZoomControl());
map.addControl(new BMapGL.ScaleControl());
map.addControl(new BMapGL.NavigationControl3D());
// 添加标注
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
</script>
</body>
</html>