Al hacer una visualización en pantalla grande recientemente, existe la necesidad de abrir la ventana de información del vehículo correspondiente en el mapa cuando se hace clic en la lista. Aunque se puede abrir llamando a openInfoWindow del mapa, existe el problema de que cuando mi vehículo se mueve, la ventana de información La ventana también se mueve en consecuencia, e inforwindow apareció originalmente mediante el evento de clic addEventListener a través de this.openInfoWindow, pero ahora aparece al hacer clic en otro lugar, por lo que la ventana de información no se moverá con el punto de clic, y allí no hay un documento oficial correspondiente Introducción, después de pensarlo, encapsulando el evento ejecutado después de hacer clic, y luego, al personalizar el clic, recorriendo todos los puntos devueltos por el método getOverlays() del mapa, encuentre el evento correspondiente y ejecute él.
1. Encapsule el método después de hacer clic
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. Haga esto en el lugar donde aparece el clic personalizado en la ventana de información
// 显示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()
}
}
},