1.定义对象数组

cars:[

{

indexName: 0,

name:'登高车',

state:false,

icon:'static/img/mapMarker/car1.png',

points:[

[116.316967,39.990748],

[116.323938,39.989919],

[116.31311,39.9890],

[116.315,39.9890],

],

},

{

indexName:1,

name:'高压灭火剂',

state: false,

icon:'static/img/mapMarker/car2.png',

points:[

[116.328896,39.988039],

[116.321135,39.987072],

]

},

{

indexName: 2,

name:'高压强磁堵漏装置',

state: false,

icon:'static/img/mapMarker/car3.png',

points:[

[116.332453,39.989007],

[116.324045,39.987984],

]

},

{

indexName: 3,

name:'排烟车',

state: false,

icon:'static/img/mapMarker/car4.png',

points:[

[116.322085,39.974316],

[116.322108,39.986381]

]

},

{

indexName:4,

name:'泡沫车',

state: false,

icon:'static/img/mapMarker/car5.png',

points:[

[116.332508,39.982311],

[116.332918,39.986386]

]

},

{

indexName: 5,

name:'气动起重气垫',

state: false,

icon:'static/img/mapMarker/car6.png',

points:[

[116.329258,39.958318],

[116.329606,39.966381]

]

},

{

indexName:6,

name:'移动供气源',

state: false,

icon:'static/img/mapMarker/car7.png',

points:[

[116.324208,39.988331],

[116.324667,39.986383]

]

},

{

indexName:7,

name:'云梯车',

state: false,

icon:'static/img/mapMarker/car8.png',

points:[

[116.320258,39.988371],

[116.321618,39.986389]

]

},

],

复制代码

2.data定义二维数组myOverlays:[];

3. mounted(){

this.$nextTick(function () {

this.initMap();

});

},

4.methods(){

initMap(){

this.createMap() ; //创建地图

},

createMap(){//创建地图

let map = new BMap.Map("map");//在百度地图容器中创建一个地图

let point = new BMap.Point(116.323066,39.989956);//定义一个中心点坐标

map.centerAndZoom(point,16);//设定地图的中心点和坐标并将地图显示在地图容器中

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

window.map = map;//将map变量存储在全局

},

addOverlays(n){//添加覆盖物

let _th = this.cars;

let array=this.myOverlays;

array[n]={

label:[],

Icon: new BMap.Icon(_th[n].icon, new BMap.Size(30, 30), {offset: new BMap.Size(10, 25),}),

markers:[]

};

for (let j = 0; j < _th[n].points.length; j++){

let point = new BMap.Point(_th[n].points[j][0], _th[n].points[j][1]);

array[n].markers[j]=new BMap.Marker(point, {

icon: array[n].Icon

});

array[n].label[j] = new BMap.Label(_th[n].name, {offset: new BMap.Size(-5, 30)});

array[n].label[j].setStyle({

color: '#fff',

fontSize: '10px',

padding: '5px',

background: 'rgba(0, 0, 0, .5)',

border: '1px solid #fff',

fontFamily: "微软雅黑",

borderRadius: '3px'

});

array[n].markers[j].setLabel(array[n].label[j]);

map.addOverlay(array[n].markers[j]);

}

},

clearOverlays(n){//删除覆盖物

let array=this.myOverlays;

for (let i=0;i< array[n].markers.length;i++){

map.removeOverlay(array[n].markers[i]);

}

},

selectBox(car){//多选框按钮操作

car.state = !car.state;

let carType = car.indexName;

if(car.state==true){

this.addOverlays(carType);

}else {

this.clearOverlays(carType);

}

}

}