必须记坑
image.png
效果如果,在信息窗口添加更多按钮
期初想当然用onclick方法 marker.on方法都不行
地图中用content方法添加的标签和vue的是脱离,没有关系的
const content = `<div style="display: flex;justify-content: space-between;">
<div style="font-weight: bold">${marker.deptName}</div>
<div data-id="moreIds" onclick="more(event);"
style="color:#3b8efc;cursor: pointer;font-weight: bold">更多</div>
</div>`
// gmarker.setLabel({
// offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
// content: content, //设置文本标注内容
// direction: 'top', //设置文本标注方位
// autoRotation: true, //自动旋转
// angle: -45 //图片旋转角度
// })
var infoWindow = new AMap.InfoWindow({
position: position,
direction: 'top', //设置文本标注方位
offset: new AMap.Pixel(10, 0),
content: content //设置文本标注内容
})
infoWindow.open(this.map)
创建完标签挂在到信息窗口
mounted() {
this.$forceUpdate()
// 初始化信息窗体
lazyAMapApiLoaderInstance.load().then(() => {
// 初始化信息窗体
this.initInfoWindow()
})
},
created() {
// 初始化地图
this.initMapData()
},
methods:{
initMapData() {
const deptId = this.form.deptId
const areaStatus = this.areaStatus
setTimeout(() => {
// 初始化地图
this.initMap()
this.initMore() //必须! 必须要在地图初始化后window.more
const params = {
deptId,
areaStatus: areaStatus.join(',')
}
this.initData(params) //初始化地图上标记需要展示弹框的文本数据
}, 1000)
},
//初始化地图
initMap() {
this.map = new AMap.Map('containes', {
resizeEnable: true, //窗口大小调整
zoom: 8
})
this.initPro()
},
//初始化弹窗中'更多'按钮全局事件
initMore() {
//初始化Map
this.map = new AMap.Map('containes', {
resizeEnable: true, //窗口大小调整
zoom: 8
})
this.$nextTick(() => {
window.more = (event) => {
const e = event.currentTarget
const element = e.getAttribute('data-id')
this.more()
}
})
},
}
loadMapData(params) {
if (this.out) {
return
}
const that = this
getDynamicStatistics(params)
.then((res) => {
if (res.code == '00000') {
const officeCarList = res.data.officeCarList //营区所有车辆
const statistical = res.data.statistical //营区窗口信息数据
this.deptName = statistical.deptName
const funcDataCensus = [
{ number: statistical.total, label: '总人数' },
{ number: statistical.duty, label: '在岗' },
{ number: statistical.repair, label: '休假' },
{ number: statistical.maintenance, label: '公差' },
{ number: statistical.scrap, label: '借调' }
]
this.funcDataCensus = funcDataCensus
const onInstall = []
const notInstall = []
officeCarList.forEach((el) => {
//inYardFlag==true 在营区 bindStatus==0 未安装
if (el.inYardFlag && el.bindStatus == 1) {
onInstall.push(el)
} else if (el.inYardFlag && el.bindStatus == 0) {
notInstall.push(el)
}
})
var campData = {}
var obdCarList = []
if (params.areaStatus.indexOf('0') != -1) {
campData = {
deptName: statistical.deptName,
infoType: 1, //信息框为1,是营区窗体展示,2为在外面的车的窗口
lng: Number(statistical.deptLng),
lat: Number(statistical.deptLat),
total: statistical.total, //机构公务车总数
duty: statistical.duty, //执勤中
repair: statistical.repair, //维修中
maintenance: statistical.maintenance, //保养中
scrap: statistical.scrap, //待报废
obdTotal: statistical.obdTotal, //obd总数
obdBind: statistical.obdBind, //obd已绑定
onStart: statistical.onStart, //obd启用中
stopTotal: onInstall.length + notInstall.length, //营区停放车辆总数
onInstall: onInstall.length, //obd已安装
notInstall: notInstall.length, //obd未安装
local: statistical.local //位置
}
obdCarList.push(campData)
console.log('下一步')
officeCarList.forEach((item) => {
if (!item.inYardFlag && item.bindStatus == 1 && item.obdStatus == 1) {
//在营区外的车
console.log('Youma')
obdCarList.push({
deptName: item.deptName,
carId: item.carId,
infoType: 2, //信息框为1,是营区窗体展示,2为在外面的车的窗口
lng: Number(item.lng),
lat: Number(item.lat),
applyUser: item.applyUser, //申请人
carNumber: item.carNumber, //车牌号
applyTime: item.applyTime, //申请用车时间
applyLocal: item.applyLocal, //申请用车地点
approverUser: item.approverUser, //审批人
speed: item.speed, //当前车速
local: item.local //当前所在位置
})
}
})
} else {
officeCarList.forEach((item) => {
//多选框没有选中本辖区,全部车辆在officeCarList中
obdCarList.push({
deptName: item.deptName,
infoType: 2, //信息框为1,是营区窗体展示,2为在外面的车的窗口
lng: Number(item.lng),
lat: Number(item.lat),
applyUser: item.applyUser, //申请人
carNumber: item.carNumber, //车牌号
applyTime: item.applyTime, //申请用车时间
applyLocal: item.applyLocal, //申请用车地点
approverUser: item.approverUser, //审批人
speed: item.speed, //当前车速
local: item.local //当前所在位置
})
})
}
this.firstArr = [obdCarList[0].lng, obdCarList[0].lat]
this.loadMarkers(obdCarList)
}
// this.timer = setTimeout(that.loadMapData(params), 20000)
})
.catch(() => {
// this.timer = setTimeout(that.loadMapData(params), 20000)
})
},
//初始化地图
initMap() {
this.map = new AMap.Map('containes', {
resizeEnable: true, //窗口大小调整
zoom: 8
})
this.initPro()
},
//添加多个不同的点标记到地图
loadMarkers(Markerdata) {
this.initMap()
var position
const deptId = this.form.deptId
Markerdata.forEach((marker, i) => {
if (marker.infoType == 1) {
//营区
marker.icon = this.campIcon
} else if (marker.infoType == 2 && !marker.approverUser) {
//未审批
marker.icon = this.notApply
} else if (marker.infoType == 2 && marker.speed > 100) {
//超速
marker.icon = this.overSpeed
} else if (marker.infoType == 2 && marker.speed < 100) {
marker.icon = this.normal
}
position = [Number(marker.lng), Number(marker.lat)]
var gmarker = new AMap.Marker({
position: position,
icon: marker.icon,
autoRotation: true, //自动旋转
offset: new AMap.Pixel(-10, 0) //往左往上
})
//定位图片下方标注
if (marker.infoType == 1 && !this.off) {
const content = `<div style="margin-top:8px;display: flex;justify-content: space-between;"><div style="font-weight: bold">${marker.deptName}</div><div data-id="moreIds" onclick="more(event);" style="color:#3b8efc;cursor: pointer;font-weight: bold">更多</div></div>
<div style="margin:8px 0"><span class="bbTitle">机构公务车总数:</span><span>${marker.total ? marker.total : 0}</span></div>
<div style="margin:8px 0"><span><span class="bbTitle">执勤中:</span><span>${marker.duty ? marker.duty : 0}</span></span><span style="margin:0 10px"><span class="bbTitle">维修中:</span>${marker.repair ? marker.repair : 0}</span><span style="margin:0 10px"><span class="bbTitle">保养中:</span>${
marker.maintenance ? marker.maintenance : 0
}</span><span><span class="bbTitle">待报废:</span>${marker.scrap ? marker.scrap : 0}</span></div>
<div style="margin:8px 0" class="bbTitle">机构OBD状态</div>
<div style="margin:8px 0"><span><span class="bbTitle">OBD总数:</span>${marker.obdTotal ? marker.obdTotal : 0}</span><span style="margin:0 15px"><span class="bbTitle">已绑定:</span>${marker.obdBind ? marker.obdBind : 0}</span><span><span class="bbTitle">OBD启用中:</span>${
marker.onStart ? marker.onStart : 0
}</span></div>
<div style="margin:8px 0" class="bbTitle">营区车辆概况 (2km内)</div>
<div style="margin:8px 0"><span class="bbTitle">营区停放车辆总数:${marker.stopTotal ? marker.stopTotal : 0}</span><span style="margin:0 15px"><span class="bbTitle">(已绑定:</span>${marker.onInstall ? marker.onInstall : 0}</span><span><span class="bbTitle">未绑定:</span>${
marker.notInstall ? marker.notInstall : 0
})</span></div>
<div style="margin:8px 0" class="bbTitle">位置: ${marker.local ? marker.local : '暂无'}</div>`
// gmarker.setLabel({
// offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
// content: content, //设置文本标注内容
// direction: 'top', //设置文本标注方位
// autoRotation: true, //自动旋转
// angle: -45 //图片旋转角度
// })
var infoWindow = new AMap.InfoWindow({
position: position,
direction: 'top', //设置文本标注方位
offset: new AMap.Pixel(10, 0),
content: content //设置文本标注内容
})
infoWindow.open(this.map)
gmarker.on('click', (e) => {
infoWindow.open(this.map)
})
}
if (marker.infoType == 2) {
var contents
gmarker.on('mouseover', (e) => {
//正常 和超速
// 鼠标移入打开信息窗体
if (marker.speed < 101) {
contents = `<div style="display: flex;justify-content: space-between;"><div style="font-weight: bold">${marker.deptName}</div></div>
<div><span class="bbTitle">申请人:</span><span>${marker.applyUser ? marker.applyUser : '无'}</span></div>
<div><span><span class="bbTitle">车牌号:</span><span>${marker.carNumber}</span></div>
<div><span><span class="bbTitle">申请用车时间:</span><span>${marker.applyTime ? marker.applyTime : '无'}</span></div>
<div><span><span class="bbTitle">申请用车地点:</span><span>${marker.applyLocal ? marker.applyLocal : '无'}</span></div>
<div><span><span class="bbTitle">审批人:</span><span>${marker.approverUser ? marker.approverUser : '无'}</span></div>
<br>
<div><span><span class="bbTitle">当前车速:</span>${marker.speed ? marker.speed : 0}km/h</span></div>
<div class="bbTitle">当前所在位置: ${marker.local ? marker.local : '暂无'}</div>`
} else if (marker.speed > 100) {
contents = `<div style="display: flex;justify-content: space-between;"><div style="font-weight: bold">${marker.deptName}</div></div>
<div><span class="bbTitle">申请人:</span><span>${marker.applyUser ? marker.applyUser : '无'}</span></div>
<div><span><span class="bbTitle">车牌号:</span><span>${marker.carNumber}</span></div>
<div><span><span class="bbTitle">申请用车时间:</span><span>${marker.applyTime ? marker.applyTime : '无'}</span></div>
<div><span><span class="bbTitle">申请用车地点:</span><span>${marker.applyLocal ? marker.applyLocal : '无'}</span></div>
<div><span><span class="bbTitle">审批人:</span><span>${marker.approverUser ? marker.approverUser : '无'}</span></div>
<br>
<div><span><span class="bbTitle">当前车速:</span><spanstyle="color:red">${marker.speed ? marker.speed : 0}km/h(超速)</span></div>
<div class="bbTitle">当前所在位置: ${marker.local ? marker.local : '暂无'}</div>`
}
gmarker.setLabel({
offset: new AMap.Pixel(0, 10), //设置文本标注偏移量
content: contents, //设置文本标注内容
direction: 'right', //设置文本标注方位
autoRotation: true, //自动旋转
angle: -45 //图片旋转角度
})
})
gmarker.on('mouseout', (e) => {
gmarker.setLabel(null)
})
}
// if (!this.off) {
gmarker.setMap(this.map)
this.off = true
var newCenter = this.map.setFitView() //合适的视口
newCenter.getCenter()
// this.map.setZoom(this.zoom)
// }
})
},
此时 信息窗口中的更多按钮可以触发了window,more中调用vue中的method即可
网友评论