mapbox创建自定义marker图标绑定弹框展示信息
/**
* 创建自定义marker图标绑定弹框
*/
let carMarker = [];//存放marker图标
for(let m= 0;m<;m++){
let el = document.createElement("div");
= "marker-car"+m;
el.setAttribute("id_",gpsInfoList[m].VehicleId);
el.setAttribute("index_",gpsInfoList[m].VehicleId);
el.setAttribute("tel",gpsInfoList[m].tel);//联系电话
el.setAttribute("driver",gpsInfoList[m].driver);//姓名
el.setAttribute("status",gpsInfoList[m].status);//状态
= 70+"px";
= 28+"px";
= "no-repeat";//设置背景图片不重复
= "center";//设置背景图片居中
= "map";//添加到map
if(type == "1"){
el.setAttribute("imgUrl",'url('+carOnImg+')');//在线图标
= 'url('+carOnImg+')';
}else {
el.setAttribute("imgUrl",'url('+carOffImg+')');//离线图标
= 'url('+carOffImg+')';//离线
}
let arr = [gpsInfoList[m].Longitude,gpsInfoList[m].Latitude];
let lnglat = .convert(arr);
let carMarker = new (el)
.setLngLat(lnglat)
let popupStr = `<div class = "popupCar" style = "font-size:12px;width:160px;padding:5px 8px 10 px 8px;box-sizing:border-box;background-color:rgba(56,58,69,0.9);box-shadow:3px 3px 5px rgba(0,0,0,0.6);color:#fff;border-radius:8px;">
<div style="height:32px;line-height:32px;font-size:14px;color:#18dd91;border-bottom:1px solid:#b0bcdb;margin-bottom:3px;">`+gpsInfoList[m].VehicleId+`</div>
<div style="height:32px;line-height:32px;font-size:14px;color:#18dd91;"><span>车牌号:</span><span>`+gpsInfoList[m].VehicleId+`</span></div>
</div>`
let popup = new ({offset:[0,-10],closeButton:false,closeOnClick:false})
.setHTML(popupStr)
// .setText()
//.setLngLat(lnglat)
//.addTo(map)
carMarker.setPopup(popup);
carMarker.addTo(map);
carMarker.push(carMarker);
//给marker注册点击事件
= function(){
if(popup){
popup.remove();
}
= this.getAttribute("tel");//电话
= this.getAttribute("driver");//司机姓名
let arr_ = [this.getAttribute("lon"),this.getAttribute("alt")];
let center_ = .convert(arr_);//获取经纬度信息
let status = this.getAttribute("status");
let tmpCarId = this.getAttribute("id_");
if(status == "0"){
//离线
}else if(status == "1"){
//在线
}else{
}
if(>0){
for(let i=0;i<;i++){
if(tmpCarId !== carMarker[i].getElement().getAttribute("id_")){
if(carMarker[i].getPopup().isOpen()){
carMarker[i].togglePopup();
}
}
}
}
}
}