最近心血来潮，想学学百度地图，请教了同事张同学，成果如下
1.首先在index.html中引入ak
<scripttype="text/javascript"src="http://api./api?v=2.0&ak=your ak"></script>
2.在.angular-cli.json中引入heatmap.js
"../src/assets/heatmap.js"
ponent的html中是
<divid="container"style="width:550px;height:350px;margin-top:50px;"></div>
ponent的ts中
import{Component, OnInit}from'@angular/core';declare varBMap:any;declare varBMapLib:any;@Component({selector:'app-root',templateUrl:'./ponent.html',styleUrls: ['./ponent.sass']})export classAppComponentimplementsOnInit {ngOnInit() {this.baidu();}baidu() {constpoints = [{'lng': 120.628,'lat': 31.323,'count': 20},{'lng': 120.628,'lat': 31.324,'count': 20},{'lng': 120.628,'lat': 31.325,'count': 20},{'lng': 120.625,'lat': 31.3222,'count': 100},{'lng': 120.626,'lat': 31.3222,'count': 100},{'lng': 120.627,'lat': 31.3222,'count': 100},{'lng': 120.6212,'lat': 31.3212,'count': 15},{'lng': 120.6213,'lat': 31.3213,'count': 3},{'lng': 120.6214,'lat': 31.3214,'count': 24},{'lng': 120.6215,'lat': 31.3215,'count': 12},{'lng': 120.6216,'lat': 31.3216,'count': 57},{'lng': 120.6217,'lat': 31.3217,'count': 70},{'lng': 120.6218,'lat': 31.3218,'count': 8}];constmap =newBMap.Map('container');// 创建地图实例 map.centerAndZoom(newBMap.Point(120.62, 31.32), 15); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); // 允许滚轮缩放constheatmapOverlay =newBMapLib.HeatmapOverlay({'radius': 20,'visible':true,'opacity': 70});// visible 热力图是否显示,默认为true // opacity 热力的透明度,1-100 // radius 势力图的每个点的半径大小 // gradient {JSON} 热力图的渐变区间 . gradient如下所示.其中 key 表示插值的位置, 0~1.value 为颜色值. // { // .2:'rgb(0, 255, 255)', // .5:'rgb(0, 110, 255)', // .8:'rgb(100, 0, 255)' // } map.addOverlay(heatmapOverlay);heatmapOverlay.setDataSet({data: points,max: 100 }); // data是热力图的详细数据,count是权重值，max:{Number}权重的最大值 }}
