接口返回的数组对象里 再每个对象里面添加新字段
this.points.forEach(r => {
r.imageUrl = "";
});
地图上循环的坐标 点击出现对应的信息
// 初始化首页地图
initMap() {
BaiduMap.init().then(BMap => {
// console.log("地图初始化");
map = new BMap.Map("home-map"); // 创建Map实例
// var marker = new BMap.Marker(new BMap.Point(this.lng, this.lat)); // 设置地图显示的城市 此项是必须设置的
// 多个循环添加
this.toggleMapTheme();
if (this.points.length > 0) {
console.log(1111);
map.centerAndZoom(
new BMap.Point(this.points[0].lng, this.points[0].lat),
10
); // 初始化地图,设置中心点坐标和地图级别
} else {
map.centerAndZoom("南京", 16); // 初始化地图,设置中心点坐标和地图级别
}
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.enableInertialDragging(true); //开启拖拽
this.addMaker(this.points);
});
},
// 添加标注
addMaker(points) {
points.forEach(item => {
let image = "";
if (item.type === 3) {
// image = fireroomImg;
this.imgeList = fireroomImg;
// item.imageUrl = fireroomImg;
// console.log(item.imageUrl);
} else if (item.type === 2) {
// image = hydrantImg;
this.imgeList = hydrantImg;
// nb消火栓的图片
} else if (item.type === 4) {
// image = errImg;
this.imgeList = abnormImg;
} else {
// image = companyImg;
this.imgeList = companyImg;
}
let icon = {
icon: new BMap.Icon(this.imgeList, new BMap.Size(40, 50))
};
let marker = new BMap.Marker(new BMap.Point(item.lng, item.lat), icon);
marker.setTitle(item.name);
marker.type = item.type;
marker.companyId = item.companyId;
marker.dangerLevel = item.dangerLevel;
// 添加点击事件
marker.addEventListener("click", e => {
this.markerClick(e);
});
map.addOverlay(marker);
});
// map.setViewport(point);
},
// 添加点击事件
markerClick(e) {
let target = e.target.point;
map.centerAndZoom(new BMap.Point(target.lng, target.lat), 16);
if (e.target.type === 3) {
this.showCompanyDetail = false;
this.fireList = false;
this.fireListNB = false;
this.fireStationDetail = true;
minifirestation(e.target.companyId).then(res => {
this.fireStationData = res.data;
});
}