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);
}
}
}
转播
