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

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

<div id="hotmap" style="width:500px;height:500px"></div>
//创建一个地图
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的数据经纬度都是差不多的，甚至有重复的）
低头操作猛如虎，一看战绩0-5。没错，快速打脸，但我能认错吗，认错是不可能的。所以我不死心的缩放，移动我的地图，企图找到我另外两个不听话的逆子的时候，我找到了。（没有录屏，看我给你吹，不是，将就着看我描述吧）以我的地图为例，拖动地图至地图高度的下一屏，出现了“万宝商场”的热力点，但是我鼠标一松手，热力点消失了。日常疑惑。
百度，官网都没有解决，后来在同事的帮助下，去看了渲染的html代码，发现热力图渲染的图层是相对定位，所以，加载了三次方法，三个热力图图层是向下堆放显示的，又因为区域的限制，所以只能在地图上显示第一个图层热力。
好了，问题找到了，解决办法就是改变它的定位方法，让其绝对定位，多个图层重合。

heatmapOverlay.V.style.position = 'absolute'

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