百度地图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); //开启信息窗口                                                  }                                            }                                                                                                  }                            });        },        }