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