百度热力图，同时渲染多个不同颜色单一热力层

在项目开发中，产品提出“增加本商场及对标商场商场客流来源热力分布，不同商场热力用单一颜色进行区分”，乍一想，就是在一个地图上同时多次渲染热力图加载方法。这还不容易？低头一阵猛敲，代码完成

//创建一个地图
function getMap(){
    var map = new BMap.Map("hotmap");
    var point = new BMap.Point(120.70408, 31.336865);
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); // 允许滚轮缩放
    map.setMapStyle({
        style: 'midnight'
    }); //设置主题样式
    
    //构建热力图
    var points1=[...];
    var points2=[...];
    var points3=[...];
    function getColor(points, gradient) {
        var heatmapOverlay;
        heatmapOverlay = new BMapLib.HeatmapOverlay({
            "radius": 20
        });
        map.addOverlay(heatmapOverlay);
        heatmapOverlay.setDataSet({
            data: points,
            max: 100
        });
        heatmapOverlay.setOptions({
            "gradient": gradient
        });
    }
    var gradient1 = {
        0: 'rgb(204, 102, 0)',
        '.5': 'rgb(204, 102, 0)',
        1: 'rgb(204, 102, 0)'
    };
    var gradient2 = {
        0: 'rgb(217, 215, 8)',
        '.5': 'rgb(217, 215, 8)',
        1: 'rgb(217, 215, 8)'
    };
    var gradient3 = {
        0: 'rgb(5, 209, 218)',
        '.5': 'rgb(5, 209, 218)',
        1: 'rgb(5, 209, 218)'
    };
    getColor(points1, gradient1)//需求中的“本商城”
    getColor(points2, gradient2)//对比“商场A”
    getColor(points3, gradient3)//对比“商场B”
}

咋一看，好像没什么问题，运行也没有报错，但是我三个热力数据点应该是聚集在一起的啊，怎么只有一个正常显示呢（为方便测试，points1,points2,points3的数据经纬度都是差不多的，甚至有重复的）
好了，问题找到了，解决办法就是改变它的定位方法，让其绝对定位，多个图层重合。

heatmapOverlay.V.style.position = 'absolute'

效果如下
就这样一句简洁的代码，折磨我一个小时，还是在同事的帮助下解决的，不可不感叹，代码的威力甚大。
第一次写文章，除了记录下这个问题，更多的还是提醒自己，遇事多想多看，从原理考虑。古人云“书山有路勤为径，学海无涯苦作舟”，既然选择了这条路，还是多学多思考，共勉！