首先进入百度地图开放平台，注册成为开发者，并创建应用，得到自己的AK
地址：http://lbsyun.baidu.com/apiconsole/key/create#/home
然后在页面中引入JS文件：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=自己的AK"></script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图测试</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=yCvS1aOq0H8LenHSomT59pKd2w98PEU2"></script>
<style>
*{
margin:0;
padding:0;
}
html, body, #map {
width: 100%;
height: 100%;
}
.anchorBL, .BMap_cpyCtrl{
display:none;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
console.log(window.BMapGL); //挂载到window上的一个对象
var map = new BMapGL.Map("map",{
minZoom: 6, //最小缩放比例
maxZoom: 20 //最大缩放比例
}); //初始化地图
var point = new BMapGL.Point(111.65, 40.82); //设置地图中心点
map.centerAndZoom(point, 12); //让地图出来，设置中心点及缩放比例
map.enableScrollWheelZoom(true); //允许鼠标滚轮进行放大缩小
var zoomCtrl = new BMapGL.ZoomControl({ //缩放控件
anchor: BMAP_ANCHOR_TOP_RIGHT
})
map.addControl(zoomCtrl);
var scaleControl = new BMapGL.ScaleControl({ //标尺控件
anchor: BMAP_ANCHOR_TOP_LEFT
});
map.addControl(scaleControl);
map.setMapStyleV2({ //地图的自定义样式
styleId: "556b6c846f130ec3ad0016f2eba410f6"
})
var myIcon = new BMapGL.Icon( //设置图标
"./images/jiqun.png", //图标路径
new BMapGL.Size(35, 35), //图标大小
{}
)
var marker = new BMapGL.Marker(point, {icon: myIcon})
map.addOverlay(marker);
</script>
</body>
</html>
效果如下：