百度地圖熱力圖

 

<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'));

}