When doing large-screen visualization recently, there is a need to pop up the corresponding vehicle information window on the map when the list is clicked. Although it can be popped up by calling openInfoWindow of the map, there is a problem that when my vehicle moves, the information window The window also moves accordingly, and inforwindow was originally popped up by the addEventListener click event through this.openInfoWindow, but now it pops up by clicking elsewhere, so the information window will not move with the click point, and there is no corresponding official document Introduction, after thinking for a while, by encapsulating the event executed after the click, and then when customizing the click, by looping through all the points returned by the getOverlays() method of the map, find the corresponding event and execute it.
1. Encapsulate the method after clicking
for (let n = 0; n < this.carInfo.length; n++) {
var myIcon = new BMap.Icon("https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/map_car_1.png", new BMap.Size(45.6, 35.6), {
imageSize: new BMap.Size(45.6, 35.6),
});
//将所有点信息保存到对象里去
this.nowPoint[this.carInfo[n].id] = new BMap.Point(this.carInfo[n].longitude, this.carInfo[n].latitude);
this.nowMarker[this.carInfo[n].id] = new BMap.Marker(this.nowPoint[this.carInfo[n].id], { icon: myIcon });
this.map.addOverlay(this.nowMarker[this.carInfo[n].id]);
//在地图的marker对象里添加id作为标识，以便后面查询
this.nowMarker[this.carInfo[n].id].id = this.carInfo[n].id;
//将点击事件进行封装，因原来的监听click对象里的this才有openInfoWindow方法才能这么做
this.nowMarker[this.carInfo[n].id].clickFun = function () {
var sContent = `<div class="tip-view"><div class="tip-view-content"><h4 class="tip-view-tit"><span>${_this.carInfo[n].numberPlate}</span> <span class="tip-view-tit-r tip-view-tit-video1"><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/map_phone_icon.png" class="tip-view-tit-r-1"/><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/map_video_icon.png" class="videoIcon"/><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/infor_window_close.png" class="infor-close-icon"/></span><span class="tip-view-tit-r tip-view-tit-video2"><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/qp.png" class="qp-icon"/><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/infor_window_close.png" class="infor-close-icon"/></span></h4>
<div class="tip-view-flex video-check1">
<div class="tip-view-driver"><img src="${_this.carInfo[n].imgUrl}"/><p class="tip-view-driver-name">${_this.carInfo[n].driver}</p></div>
<div class="tip-view-car ">
<div class="tip-view-car-row">
<dl>
<dt>车辆状态</dt>
<dd>${_this.carInfo[n].status == 1 ? '运行中' : _this.carInfo[n].status == 2 ? '未启用' : '维修中'}</dd>
</dl>
<dl>
<dt>当前载重</dt>
<dd>${_this.carInfo[n].currentLoad}吨</dd>
</dl>
</div>
<div class="tip-view-car-row">
<dl>
<dt>当前车速</dt>
<dd>${_this.carInfo[n].rate}KM/H</dd>
</dl>
<dl>
<dt>剩余电量</dt>
<dd>${(_this.carInfo[n].remainingBattery * 100).toFixed(1)}%</dd>
</dl>
</div>
<div class="tip-view-car-row">
<dl>
<dt>平均能耗(kwh/km)</dt>
<dd>${_this.carInfo[n].averageEnergyConsumption}</dd>
</dl>
<dl>
<dt>今日行驶里程</dt>
<dd>${_this.carInfo[n].todayMileage}公里</dd>
</dl>
</div>
</div>
</div>
<div class="infor-bot-bg video-check1"><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/infor_bot_bg.png"/></div>
<div class="video-check2">
<video width="100%" height="220" controls autoplay>
<source src="http://192.168.0.105:8830/image/car_video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>`;
var infoWindow = new BMap.InfoWindow(sContent);
_this.nowInfoWindow[_this.carInfo[n].id] = infoWindow;
this.openInfoWindow(infoWindow);
//下面是自定义信息框里对象的点击事件，可以不用管
if (!infoWindow.isOpen()) {
infoWindow.addEventListener("open", function () {
$('.videoIcon').click(function () {
$('.video-check1').hide();
$('.tip-view-tit-video1').hide();
$('.video-check2').show();
$('.tip-view-tit-video2').show();
})
$('.infor-close-icon').click(function () {
_this.map.closeInfoWindow();
})
$(".qp-icon").click(function () {
_this.videoShow = true;
})
})
} else {
$('.videoIcon').click(function () {
$('.video-check1').hide();
$('.tip-view-tit-video1').hide();
$('.video-check2').show();
$('.tip-view-tit-video2').show();
})
$('.infor-close-icon').click(function () {
console.log('点击了')
_this.map.closeInfoWindow();
})
$(".qp-icon").click(function () {
_this.videoShow = true;
})
}
};
};
// marker添加点击事件
this.nowMarker[this.carInfo[n].id].addEventListener('click', function () {
this.clickFun()
});
}2. Do this in the place where the custom click pops up the inforwindow
// 显示inforWindow
showInfor(row) {
//获取map的marker列表
let markerList = this.map.getOverlays();
this.selectedId=row.id;
for(let i=0;i<markerList.length;i++){
if(row.id==markerList[i].id){
//判断相对应的marker,执行之前自定义的点击事件clickFun()
markerList[i].clickFun()
}
}
},