在methods中加入：
setMap() {
let that = this
this.$post('XXXXXXXX', {
pageSize: -1,
...this.queryParams,
}).then((r) => {
let data = r.data
this.proList = data.rows
console.log(this.proList);
var center = new qq.maps.LatLng(39.916527, 116.397128);//设置地图中心点
var map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 13
});
//创建多个标注
for (let i = 0; i < this.proList.length; i++) {
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(this.proList[i].pgps.split(',')[0], this.proList[i].pgps.split(',')[1]),//经纬度
map: map,
});
marker.id = this.proList[i].pid
marker.ptype = this.proList[i].ptype//
marker.pstate = this.proList[i].pstate
marker.xm1 = `项目名称:
` + this.proList[i].pname + ``
marker.xm2 = `开工时间:
` + this.proList[i].pbegTme + ``
if (this.proList[i].ptype == 0) {
marker.xm3 = `类型:新建
`
}
if (this.proList[i].ptype == 1) {
marker.xm3 = `类型:储油罐
`
}
if (this.proList[i].ptype == 2) {
marker.xm3 = `类型:直接式加热炉大修
`
}
if (this.proList[i].ptype == 3) {
marker.xm3 = `类型:锅炉大修
`
}
if (this.proList[i].ptype == 4) {
marker.xm3 = `类型:热媒炉大修
`
}
marker.xm4 = `进度:
` + this.proList[i].percent + ``
marker.xm5 = `建设单位:
` + this.proList[i].pcompanyName + ``
this.markerList.push(marker);
//创建多个文本标注
var label = new qq.maps.Label({
position: new qq.maps.LatLng(this.proList[i].pgps.split(',')[0], this.proList[i].pgps.split(',')[1]),
map: map,
content: marker.xm1 + marker.xm2+marker.xm3+marker.xm4+marker.xm5
// content: `项目名称:
`+marker.ceshi+`项目类型:
`+marker.pstate
});
var that = this
//添加到提示窗
// var info = new qq.maps.InfoWindow({
// map: map
// });
//标注点击事件：
qq.maps.event.addListener(this.markerList[i], 'click', function () {
console.log(this.id);
// info.open();
// info.setContent('单击标记
');
// info.setPosition(center);
let routeUrl = that.$router.resolve({
path: "/jiankong",
query: {pid: this.id}
});
window.open(routeUrl.href, '_blank');
});
}
// 新建图标
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(40, 40),
origin = new qq.maps.Point(0, 0),
markerIcon = new qq.maps.MarkerImage(
"/static/img/pt00.png",
size,
origin,
anchor
),
markerIcon1 = new qq.maps.MarkerImage(
"/static/img/pt01.png",
size,
origin,
anchor
),
markerIcon2 = new qq.maps.MarkerImage(
"/static/img/pt10.png",
size,
origin,
anchor
),
markerIcon3 = new qq.maps.MarkerImage(
"/static/img/pt11.png",
size,
origin,
anchor
),
markerIcon4 = new qq.maps.MarkerImage(
"/static/img/pt20.png",
size,
origin,
anchor
),
markerIcon5 = new qq.maps.MarkerImage(
"/static/img/pt21.png",
size,
origin,
anchor
),
markerIcon6 = new qq.maps.MarkerImage(
"/static/img/pt30.png",
size,
origin,
anchor
),
markerIcon7 = new qq.maps.MarkerImage(
"/static/img/pt31.png",
size,
origin,
anchor
),
markerIcon8 = new qq.maps.MarkerImage(
"/static/img/pt40.png",
size,
origin,
anchor
),
markerIcon9 = new qq.maps.MarkerImage(
"/static/img/pt41.png",
size,
origin,
anchor
);
//以下是我的项目类型不同的判断，根据不同项目类型使用不同图标
for (var i = 0; i < this.markerList.length; i++) {
// 新建
if (this.markerList[i].ptype == 0) {
if (this.markerList[i].pstate == 0 || this.markerList[i].pstate == 4) {
console.log(this.markerList[i].pstate + "---" + i)
this.markerList[i].setIcon(markerIcon);
}
if (this.markerList[i].pstate == 1 || this.markerList[i].pstate == 2 || this.markerList[i].pstate == 3) {
console.log(this.markerList[i].pstate + "------" + i)
this.markerList[i].setIcon(markerIcon1);
}
}
// 储油罐
if (this.markerList[i].ptype == 1) {
if (this.markerList[i].pstate == 0 || this.markerList[i].pstate == 4) {
console.log(this.markerList[i].pstate + "---" + i)
this.markerList[i].setIcon(markerIcon2);
}
if (this.markerList[i].pstate == 1 || this.markerList[i].pstate == 2 || this.markerList[i].pstate == 3) {
console.log(this.markerList[i].pstate + "------" + i)
this.markerList[i].setIcon(markerIcon3);
}
}
// 直接式加热炉大修
if (this.markerList[i].ptype == 2) {
if (this.markerList[i].pstate == 0 || this.markerList[i].pstate == 4) {
console.log(this.markerList[i].pstate + "---" + i)
this.markerList[i].setIcon(markerIcon6);
}
if (this.markerList[i].pstate == 1 || this.markerList[i].pstate == 2 || this.markerList[i].pstate == 3) {
console.log(this.markerList[i].pstate + "------" + i)
this.markerList[i].setIcon(markerIcon7);
}
}
// 锅炉大修
if (this.markerList[i].ptype == 3) {
if (this.markerList[i].pstate == 0 || this.markerList[i].pstate == 4) {
console.log(this.markerList[i].pstate + "---" + i)
this.markerList[i].setIcon(markerIcon6);
}
if (this.markerList[i].pstate == 1 || this.markerList[i].pstate == 2 || this.markerList[i].pstate == 3) {
console.log(this.markerList[i].pstate + "------" + i)
this.markerList[i].setIcon(markerIcon7);
}
}
// 热媒炉大修
if (this.markerList[i].ptype == 4) {
if (this.markerList[i].pstate == 0 || this.markerList[i].pstate == 4) {
console.log(this.markerList[i].pstate + "---" + i)
this.markerList[i].setIcon(markerIcon8);
}
if (this.markerList[i].pstate == 1 || this.markerList[i].pstate == 2 || this.markerList[i].pstate == 3) {
console.log(this.markerList[i].pstate + "------" + i)
this.markerList[i].setIcon(markerIcon9);
}
}
}
})
},
mounted() {
this.setMap()
}
效果图如下：
