百度地图api开发，创建不同颜色的海量点，给海量点加点击弹出窗体

1、省略注册等步骤

2、省略html等步骤

    mounted(){
           this.intGis();  
},
   methods:{
           intGis(){
                this.map = new BMap.Map("container"); 
                var point = new BMap.Point(116.376, 39.999);  // 定位的地图视觉中心
                this.map.centerAndZoom(point, 13);   // 设置地图的缩放级别
           this.map.enableScrollWheelZoom();  //允许鼠标滚动缩放
        },
        getlargeMark(){
               if(document.createElement('canvas').getContext){  // 判断浏览器是否支持
                var map=this.map;
                var data=this.markdatas;         
                var that=this
                var areaXyArr=[];
                // var points=[];
                this.pointsTuijian=[];    // 设置不同的点的数组，不同点有不同的颜色
                this.pointsPeiyu=[];      // 设置不同的点的数组，不同点有不同的颜色
                this.pointsChubei=[];    // 设置不同的点的数组，不同点有不同的颜色
                this.map.clearOverlays();  // 请求之前先清理所有的点，如果不清除，每次接口请求不同的数据的时候，点不会更新   
            for (var i = 0; i < data.length; i++) {  // 循环遍历把不同类型的点分别放在不同数组
                var data2=data[i];
                if(data2.areaXy){
                    if(data2.recommend){
                        if(data2.recommend=="推荐"){
                            var areaXyArr=data2.areaXy.split(',');
                            this.pointsTuijian.push(new BMap.Point(parseFloat(areaXyArr[0]),parseFloat(areaXyArr[1]))); 
                        }
                        else if(data2.recommend=="培育"){
                            var areaXyArr=data2.areaXy.split(',');
                            this.pointsPeiyu.push(new BMap.Point(parseFloat(areaXyArr[0]),parseFloat(areaXyArr[1]))); 
                        }
                        else if(data2.recommend=="储备"){
                            var areaXyArr=data2.areaXy.split(',');
                            this.pointsChubei.push(new BMap.Point(parseFloat(areaXyArr[0]),parseFloat(areaXyArr[1]))); 
                        }  
                    }  
                }                  
            }
                this.changePointsColor(this.pointsTuijian,this.optionsTuijian);  // this.optionsTuijian等有不同的样式配置
                this.changePointsColor(this.pointsPeiyu,this.optionsPeiyu);
                this.changePointsColor(this.pointsChubei,this.optionsChubei);
                this.getFourNums(data.length)
            }else{
                alert('请在chrome、safari、IE8+以上浏览器查看本示例');
            }
        },
          // 初始化不同颜色的点,这和上一步完成不同颜色点的创建
        changePointsColor(points,options){
            var map=this.map;
            var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
            map.addOverlay(pointCollection);  // 添加Overlay
            this.clickPoints(pointCollection);// 给点添加点击事件    
        },
        // 点击弹出弹窗
        clickPoints(pointCollection){
            var map=this.map;
            var data=this.markdatas;
            // console.log(data)
             pointCollection.addEventListener('click', function (e) {
                    //  alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat); 
                // 循环查出值
                for (var i = 0; i < data.length; i++) {
                    if(data[i].areaXy){
                         if(parseFloat(data[i].areaXy.split(',')[0])==e.point.lng && parseFloat(data[i].areaXy.split(',')[1])==e.point.lat){ //找到                    点击的点在data中的index 
                               var id=data[i].compId // 通过找到的index得到这个id,通过这个id来请求获取窗体中的信息，请求接口步骤省略
                               var Content=`<div>窗体信息</div>`
                                var infoWindow = new BMap.InfoWindow(Content,this.opts);  // 创建信息窗口对象 
                                 map.openInfoWindow(infoWindow,point); //开启信息窗口  
                        

                        }
                        
                    }
                   
                   
                                            
                }
                
            });

        },
        

}