本文适用于需要将接入了地图 JS API 2.0 或者 3.0版本的地图应用升级到 GL 的开发者阅读，我们建议开发者按照以下步骤对代码进行少许修改来升级 JS API 的版本，以便获得最佳的开发体验和后续服务支持。

GL版本引用的百度地图API文件需按下方内容替换：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

以上是同步加载 JSAPI 的使用方式，异步加载可以参考示例；

初始化地图设置 ，将BMap改为BMapGL

注意：所有的实例化都需要修改为BMapGL

var map = new BMapGL.Map('container'); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

GL工具库BMapGLLib、MapVGL、BMap Draw

(1) 折线添加箭头：

var polyline = new BMapGL.Polyline(
    [
        new BMapGL.Point(116.399, 39.91),
        new BMapGL.Point(116.405, 39.92),
        new BMapGL.Point(116.423493, 39.907445),
    ],
    {
        strokeTexture: {
            // width/height 需要是2的n次方
            url: './images/Icon_road_blue_arrow.png',
            width: 16,
            height: 64,
        },
        strokeWeight: 8,
        strokeOpacity: 0.8,
    },
);

使用时可参考示例。

(2) GL点标记marker目前不支持弹跳，使用时可调用其他方式实现如：

// 创建自定义覆盖物DOM
function createDOM(feature) {
    var img = document.createElement('img');
    img.style.height = '240px';
    img.style.width = '80px';
    img.src = 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/fire.gif';
    img.draggable = false;
    return img;
}
// 创建自定义覆盖物
var customOverlay = new BMapGL.CustomOverlay(createDOM, {
    point: new BMapGL.Point(116.42342230333138, 39.92498414216742),
    opacity: 0.5,
    offsetY: -10,
});
map.addOverlay(customOverlay);

使用时可参考示例。其他方法可参考示例。

(3) 底图点击事件更改：需要添加以下代码实现：

map.addEventListener('click', (e) => {
    clickPoint = e.latlng;
    const point = e.point;
    const itemId = map.getIconByClickPosition(e);
});

使用时可参考示例。

(4) 添加聚合点更改：

GL版本需引用MapvGL的js 并调用new mapvgl.ClusterLayer() 方法，使用时可参考MapVGL示例

(5) 添加热力图图层更改：

GL需要调用MapVGL的方式实现热力图的加载，使用时可参考MapVGL示例。

(6) 个性化地图调用方法变更：

GL目前仅支持新版个性化地图方法（Map.setMapStyleV2），不支持旧版的个性化地图方法（Map.setMapStyle）。

(7) 行政区划方法更改：

GL新增简易行政区图层方法 ：new BMapGL.DistrictLayer() 使用时可参考行政大区图层。

(8) 轨迹运动方法更改：

GL版本的需要调用 BMapGLLib.TrackAnimation，引入 TrackAnimation.min.js。使用时可参考查看源码

(9) 自定义canvas图层更改：

GL版本采用以下方法进行调用：

BMapGL.CustomHtmlLayer(createDOM, {
    offsetX: 0,
    offsetY: 0,
    minZoom: 13,
    maxZoom: 19,
    enableDraggingMap: true,
});

使用时可参考示例。

(10) 室内图展示功能更改：

GL版本的展示室内图需在地图初始化时进行设置：showControls: true 使用时可参考室内图

(11) GL版本新增了设置3D视角等属性

可通过map.setHeading(64.5)；map.setTilt(73)这两个属性进行设置

(12) 交通流量图层方法更改：

GL版本使用方法为添加：map.setTrafficOn()， 移除：map.setTrafficOff()；使用时可参考交通流量图层。

(13) 调用驾车路线规划添加途经点方法更改：

GL版本使用方法为以下：

var driving = new BMapGL.DrivingRouteLine(map, {
    renderOptions: {
        map: map,
        autoViewport: true,
        enableDragging: true,
    },
});
var start = new BMapGL.Point(116.236532, 39.904113661);
var end = new BMapGL.Point(116.545486, 40.00604);
var way2 = new BMapGL.Point(116.36315661025989, 39.904113661);
driving.search(start, end, {
    waypoints: [way2],
});

使用时可参考驾车路线规划。

如发现其他接口上的不兼容，可以通过创建工单方式进行反馈