百度地图热力图

Posted 2021-11-29 liubingboke

 

<script type="text/javascript" src="//api.map.baidu.com/api?ak=LGiD08FQSqYhur2nOx6oK0gUod2K1TNA&v=2.0"></script>

<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

const map = new BMap.Map(‘map‘); // 创建地图实例

const point = new BMap.Point(res[0].store_lng, res[0].store_lat); // 创建点坐标

map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别

const points = res;

if (!isSupportCanvas()) {

alert(‘热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~‘)

}

const heatmapOverlay = new BMapLib.HeatmapOverlay({radius: 30});

map.addOverlay(heatmapOverlay);

heatmapOverlay.setDataSet({data: points, max: 100});

// 是否显示热力图

heatmapOverlay.show();

// 判断浏览区是否支持canvas

function isSupportCanvas(){

const elem = document.createElement(‘canvas‘);

return !!(elem.getContext && elem.getContext(‘2d‘));

}