mapbox创建自定义marker图标绑定弹框展示信息

/**
         * 创建自定义marker图标绑定弹框
        */
       let carMarker = [];//存放marker图标
       for(let m= 0;m<gpsInfoList.length;m++){
            let el = document.createElement("div");
            el.className = "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);//状态
            el.style.width = 70+"px";
            el.style.height = 28+"px";
            el.style.backgroundRepeat = "no-repeat";//设置背景图片不重复
            el.style.backgroundPosition = "center";//设置背景图片居中
            el.pitch = "map";//添加到map
            if(type == "1"){
                el.setAttribute("imgUrl",'url('+carOnImg+')');//在线图标
                el.style.backgroundImage = 'url('+carOnImg+')';

            }else {
                el.setAttribute("imgUrl",'url('+carOffImg+')');//离线图标
                el.style.backgroundImage = 'url('+carOffImg+')';//离线
            }
            let arr = [gpsInfoList[m].Longitude,gpsInfoList[m].Latitude];
            let lnglat = mapboxgl.LngLat.convert(arr);
            let carMarker = new mapboxgl.Marker(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 mapboxgl.Popup({offset:[0,-10],closeButton:false,closeOnClick:false})
                                .setHTML(popupStr)
                            // .setText()
                            //.setLngLat(lnglat)
                            //.addTo(map)
                    carMarker.setPopup(popup);
                    carMarker.addTo(map);
                    carMarker.push(carMarker);
                    //给marker注册点击事件
                    el.onclick = function(){
                        if(popup){
                            popup.remove();
                        }
                        this.carTel = this.getAttribute("tel");//电话
                        this.carDriver = this.getAttribute("driver");//司机姓名
                        let arr_ = [this.getAttribute("lon"),this.getAttribute("alt")];
                        let center_ = mapboxgl.LngLat.convert(arr_);//获取经纬度信息
                        let status = this.getAttribute("status");
                        let tmpCarId = this.getAttribute("id_");
                        if(status == "0"){
                            //离线

                        }else if(status == "1"){
                            //在线
                        }else{

                        }
                        if(carMarker.length>0){
                            for(let i=0;i<carMarker.length;i++){
                                if(tmpCarId !== carMarker[i].getElement().getAttribute("id_")){
                                    if(carMarker[i].getPopup().isOpen()){
                                        carMarker[i].togglePopup();
                                    }
                                }
                            }
                        }
                    }
        }