一、原生的JS

1、百度地图2.0版本

（1）先引入js文件，ak需要自己在百度地图开发者平台申请的密钥

// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key 
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ak" type="text/javascript"></script>

(2)定义一个div的id，来存放地图的demo

<div id="mapBox"></div>

(3)在js中使用

a. 创建Map实例

var map = new BMapGL.Map("mapBox");

b.初始化地图,设置中心点坐标和地图级别

var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 18);

或

map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18);

c.开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);

d.设置图片旋转

map.setHeading(角度number类型);

e.添加覆盖物，type类型'video' | 'canvas'，默认为image

    var SW = new BMapGL.Point(103.983542,1.319733); //西南角，左下角
    var NE = new BMapGL.Point(104.007868,1.364617); //东北角，右上角
    // 创建地面叠加层实例
    var imgOverlay = new BMapGL.GroundOverlay(new BMapGL.Bounds(SW, NE), {
        type: 'image',
        url: '图标的地址路径',
        opacity: 1
    });
    // 叠加层添加到地图
    map.addOverlay(imgOverlay);

完成代码

function initMap() {
    // 创建Map实例
    var map = new BMapGL.Map("mapBox");
    var point = new BMapGL.Point(104.004778,1.354436);
    map.centerAndZoom(point, 18);
    map.enableScrollWheelZoom(true);
    //设置图片旋转
    map.setHeading(66);
    var SW = new BMapGL.Point(103.983542,1.319733); //西南角，左下角
    var NE = new BMapGL.Point(104.007868,1.364617); //东北角，右上角
    // 创建地面叠加层实例
    var imgOverlay = new BMapGL.GroundOverlay(new BMapGL.Bounds(SW, NE), {
        type: 'image',
        url: './../img/arcMap.png',
        opacity: 1
    });
    // 叠加层添加到地图
    map.addOverlay(imgOverlay);
    map.panTo(new BMapGL.Point(104.004778,1.354436));
}

2、百度地图3.0版本

（1）与2.0版本不同的有引入的js文件改变了

 <script src="https://api.map.baidu.com/api?v=3.0&ak=ak" type="text/javascript"></script>
 

(2)添加覆盖物的方式改变了

var SW = new BMap.Point(103.983542,1.319733); //西南角，左下角
var NE = new BMap.Point(104.007868,1.364617); //东北角，右上角
var groundOverlayOptions = {
     opacity: 1,
     displayOnMinLevel: 1,
     displayOnMaxLevel: 22
}
var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);
//添加覆盖图
groundOverlay.setImageURL('./../img/arcMap.png');
map.addOverlay(groundOverlay);

（3）3.0版本将type类型的iamge的图片旋转功能删除了

本人在使用过程总结的，如果有问题欢迎留言建议，我也会根据建议来修改的，希望可以和大家多多学习！