一. 创建地图应用
首先，打开百度开放平台，注册账号，根据提示认证过后进入控制台。
选择创建应用之后，填上应用名称，选择浏览器端(基础开发者选择这个)，Refer白名单填*号（开发方便时使用）即可。
点完提交过后，页面自动跳转，显示创建的应用信息：其中最重要的信息就是访问应用的AK相当于唯一的键。
二. 展示地图
通过编写代码，展示地图主要分为以下几步，可以参考展示地图Demo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=Ej7yM4z9FsPyVgCZ5DotIPcc05PaLi06"></script>
</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.setHeading(64.5);
//设置地图的倾斜角度
map.setTilt(73);
// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
enableRotate: false,
enableTilt: false
});
</script>
</body>
</html>
以上代码需要注意的是， ak需要填写自己上面申请后的AK值。
展示效果：
三. 案例一：为地图添加控件
加入控件是开发的基础操作，参照官方文档添加控件
将上述代码加入比例尺，缩放以及展示城市的控件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=Ej7yM4z9FsPyVgCZ5DotIPcc05PaLi06"></script>
</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.setHeading(64.5);
//设置地图的倾斜角度
map.setTilt(73);
// 添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl();
map.addControl(scaleCtrl);
// 添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl();
map.addControl(zoomCtrl);
// 添加城市列表控件
var cityCtrl = new BMapGL.CityListControl();
map.addControl(cityCtrl);
// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
enableRotate: false,
enableTilt: false
});
</script>
</body>
</html>
图中标注，所添加的控件已经添加成功了。
三. 案例二：为地图添加覆盖物
可以在地图上添加覆盖物，覆盖物拥有自己的坐标，当扩大或缩小地图时会跟着移动。
试着参考：添加覆盖物
现在在地图上的某个位置添加红点覆盖物。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=Ej7yM4z9FsPyVgCZ5DotIPcc05PaLi06"></script>
</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);
// 创建标注
var marker = new BMapGL.Marker(point);
// 将标注添加到地图中
map.addOverlay(marker);
</script>
</body>
</html>
效果：红点覆盖物就会出现在地图之上。
也可以自定义覆盖物Logo，并对Logo进行鼠标监听,点击过后会出现弹窗。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=Ej7yM4z9FsPyVgCZ5DotIPcc05PaLi06"></script>
</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);
var myIcon = new BMapGL.Icon("1.jpeg", new BMapGL.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);
marker.addEventListener("click", function(){
alert("您点击了标注");
});
</script>
</body>
</html>
展示效果，如下：
