在angular4中显示百度地图中的热力图

最近心血来潮，想学学百度地图，请教了同事张同学，成果如下

1.首先在index.html中引入ak

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

2.在.angular-cli.json中引入heatmap.js

"../src/assets/heatmap.js"

3.component的html中是

<div id="container" style="width:550px;height:350px;margin-top:50px;"></div>

4.component的ts中

import {Component, OnInit} from '@angular/core';

declare var BMap: any;
declare var BMapLib: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {

  ngOnInit() {
    this.baidu();
  }
  baidu() {
    const points = [
      {'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}];
    const map = new BMap.Map('container');          // 创建地图实例
    map.centerAndZoom(new BMap.Point(120.62, 31.32), 15);  // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); // 允许滚轮缩放
    const heatmapOverlay = new BMapLib.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}权重的最大值
  }
}