百度地图实现聚合点展示

本篇文章介绍的是通过百度地图api实现聚合点的展示，实现效果如下：

来看看它是怎么实现的（以vue为例）：

1. 创建地图容器

 this.baiduMapOut = new BMap.Map(document.getElementById(this.className));

2. 设置中心点并且支持缩放

 this.baiduMapOut.enableScrollWheelZoom();
 this.baiduMapOut.centerAndZoom('中华人民共和国', 5);

3. 画点

 if (this.markerClusterer) {
                    this.markerClusterer.clearMarkers(this.markers);
     }
     for (const point of points) {
    let imgurl = require('../../../../assets/images/dataMarket/location-little.png');
    let iconStop = new BMap.Icon(imgurl, new BMap.Size(32, 34), {
                        anchor: new BMap.Size(23, 20)
                    });
    let pointStop = new BMap.Point(point.lng, point.lat);
    this.points.push(pointStop);
    let markerStop = new BMap.Marker(pointStop, { icon: iconStop });
    this.markers.push(markerStop);
    if (this.markers.length > 0) {
     this.markerClusterer = new BMapLib.MarkerClusterer(this.baiduMapOut, {
                        markers: this.markers
                    });
     }

上述代码中 points为从后台接口中获取的点的经纬度的集合
关键点在于：new BMapLib.MarkerClusterer 将添加的标注markers转成聚合点展示
注意： 此时会存在地图初始化 和 画点的先后顺序问题 ，可能导致某些坑，所以务必保证画点 
      的时候地图已经完全加载完毕.可以加延时来解决