<template>
  <div style="position:relative;width:100%;height:100%;">
    <div id="container" style="width:100%;height:100%;"></div>
    <!-- <div class="mapsbtn" @click="backMap">
      回到原点
    </div> -->
    <!-- 信息弹框 -->
    <!-- <div v-if="infoShow" class="infoPop">
      <div class="close_act" @click="infoShow = false" title="关闭">x</div>
      <div class="base_info">
        <div>{{ infoWindowObj.carNo }}</div>
        <div :class="infoWindowObj.obj.SbcStatus == 3 ? 'car_status on' : 'car_status'">{{
        locationStatus[infoWindowObj.obj.SbcStatus] }}</div>
        <div class="car_speed">{{ infoWindowObj.obj.spd }}km/h</div>
      </div>
      <div class="flex_box">
        <div>设备位置：</div>
        <div style="width:2.5rem;text-align: left;">{{ infoWindowObj.position }}</div>
      </div>
      <div class="flex_box">
        <div>最后定位时间：</div>
        <div>{{ infoWindowObj.obj.GPSTimeStamp }}</div>
      </div>
      <div class="path_box">
        <div @click="queryPath(infoWindowObj.deviceId)" class="path_btn">行程轨迹</div>
      </div>
    </div> -->

  </div>
</template>

<script>
// import { lunzApi, appKey, key, carList } from "@/api/data";

// import Highcharts from "highcharts/highstock";
// import Highmaps from "highcharts/modules/map";
// console.log(Highmaps)

// Highmaps(Highcharts);

import { getEnterprisePower } from "@/api/energySourcesProvince/energySourcesProvince"
import { styleJson } from "../json/mapStyle.js"
import { dateFormat } from "@/util/date";
export const appKey = '69800851-4554-4EEC-8D12-E4211B952798';//轮子appkey
export const key = '266843ed-5d4f-472c-beec-e5e50a114d47';
export default {
  data() {
    return {
      appKey: appKey,
      key: key,
      setInterval: null,
      baiduMap: null,//百度实例
      // locationModel: { 0: 'GPS定位', 1: '基站定位', 2: 'Wi-Fi定位', 3: '北斗定位', 4: 'GPS/北斗混合定位' },
      // locationStatus: { 0: '未启用', 1: '离线', 2: '静止', 3: '行驶中' },
      // locationAcc: { 0: '关闭', 1: '开启' },
      // carList: carList,//车辆设备
      markList: [
        { lng: 112.37268, lat: 25.63787, name: "福顺机械实业公司", carbon: 0, electricity: 0 },
        { lng: 112.375261, lat: 25.63742, name: "巨人机床实业公司", carbon: 0, electricity: 0 },
        { lng: 112.365047, lat: 25.630574, name: "郴州雄建实业公司", carbon: 0, electricity: 0 },
        { lng: 112.36587, lat: 25.63132, name: "众合实业公司", carbon: 0, electricity: 0 },
        { lng: 112.372727, lat: 25.635608, name: "雄达实业公司", carbon: 0, electricity: 0 },
        { lng: 112.373909, lat: 25.634179, name: "峰达实业公司", carbon: 0, electricity: 0 },
        { lng: 112.37275, lat: 25.63676, name: "伟铸机械实业公司", carbon: 0, electricity: 0 },
      ],//标注点记录
      polyline: null,//昨日轨迹
      viewData: [],//点聚合坐标集合
      // endPointMarker:null,//轨迹终点标记
      infoWindowObj: {
        obj: {
          SbcStatus: 2
        }
      },//
      infoShow: false,
    }
  },
  beforeDestroy() {
    // clearInterval(this.setInterval);
    // console.log('销毁');
  },
  beforeCreate() {
    // clearInterval(this.setInterval);
  },
  created() {
    this.$nextTick(() => {
      // this.getData()
      setTimeout(() => {
        this.initMap();
      }, 0);
      window.addEventListener('resize', () => {
        if (this.baiduMap) {
          this.backMap();
        }
      });
    })
  },
  mounted() {

  },
  methods: {
    getData() {
      getEnterprisePower({ today: this.$moment().format('yyyy-MM-DD') }).then(res => {
        let data = res.data.data
        console.log(data, '.....')
        this.markList.forEach(e => {
          data.forEach(r => {

            if (e.name.includes(r.name)) {
              e.carbon = r.carbon || 0
              e.electricity = r.electricity || 0
            }
          })
        })
        setTimeout(() => {
          this.initMap();
        }, 0);
        window.addEventListener('resize', () => {
          if (this.baiduMap) {
            this.backMap();
          }
        });
        // this.echartsInit(this.gffdzb, this.gyyhzb, this.sbghzb)
      })
    },
    //回到原中心点
    backMap() {
      var point = new BMapGL.Point(112.415542, 25.582733);
      this.infoShow = false;
      this.baiduMap.centerAndZoom(point, 12);
      if (this.polyline) {
        this.baiduMap.removeOverlay(this.polyline);
        this.polyline = null;
      }
      // this.baiduMap.closeInfoWindow();
    },
    initMap() {
      var point = new BMapGL.Point(112.415542, 25.582733);
      if (this.baiduMap) {
        this.baiduMap.centerAndZoom(point, 12);
      }
      else {

        this.baiduMap = new BMapGL.Map('container', { enableMapClick: false });
        this.baiduMap.centerAndZoom(point, 12);
        this.baiduMap.enableScrollWheelZoom(true);
        this.baiduMap.setMinZoom(12);
        // this.baiduMap.setMaxZoom(12)
        // this.baiduMap.disableDragging();  

        var bound = new BMapGL.Bounds(new BMapGL.Point(112.415542, 25.582733), new BMapGL.Point(112.415542, 25.582733));
        this.baiduMap.enableScrollWheelZoom();
        this.baiduMap.addOverlay(new BMapGL.Polygon([
          new BMapGL.Point(bound.sw.lng, bound.sw.lat),
          new BMapGL.Point(bound.sw.lng, bound.ne.lat),
          new BMapGL.Point(bound.ne.lng, bound.ne.lat),
          new BMapGL.Point(bound.ne.lng, bound.sw.lat)
        ]))

        try {
          BMapGLLib.AreaRestriction.setBounds(map, bound);
        } catch (e) {
          alert(e);
        }
        // var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL }
        // this.baiduMap.addControl(new BMapGL.NavigationControl(opts));
        // this.baiduMap.setMapStyleV2({ style: 'midnight' });

        var bdary = new BMapGL.Boundary();
        // this.baiduMap.setMapStyleV2({
        //   styleJson: styleJson
        // })
        // alert('自定义样式')
        // this.view = new mapvgl.View({
        //   map: this.baiduMap
        // });

        // bdary.get("郴州市嘉禾县", rs => {
        //   var count = rs.boundaries.length;
        //   for (var i = 0; i < count; i++) {
        //     var xyArr = rs.boundaries[i].split(';');
        //     var ptArr = [];
        //     for (var j = 0; j < xyArr.length; j++) {
        //       var tmp = xyArr[j].split(',');
        //       var pt = new BMapGL.Point(tmp[0], tmp[1]);
        //       ptArr.push(pt);
        //     }
        //     // var mapmask = new BMapGL.MapMask(ptArr, {
        //     //   isBuildingMask: true,
        //     //   isPoiMask: true,
        //     //   isMapMask: true,
        //     //   showRegion: 'inside',
        //     //   topFillColor: '#5679ea',
        //     //   topFillOpacity: 0.5,
        //     //   sideFillColor: '#5679ea',
        //     //   sideFillOpacity: 0.9
        //     // });
        //     // this.baiduMap.addOverlay(mapmask);
        //     var border = new BMapGL.Polyline(ptArr, {
        //       strokeColor: '#0e94eb',
        //       strokeWeight: 3,
        //       strokeOpacity: 1
        //     });
        //     this.baiduMap.addOverlay(border);
        //     // var ply = new BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物
        //     // this.baiduMap.addOverlay(ply);  //添加覆盖物
        //   }
        // })
        this.baiduMap.centerAndZoom(point, 10);
        this.baiduMap.setTilt(50);
        this.baiduMap.enableScrollWheelZoom();
        bdary.get('郴州市嘉禾县', (rs) => {
          var count = rs.boundaries.length; //行政区域的点有多少个
          var pointArray = [];
          for (var i = 0; i < count; i++) {
            var path = [];
            var str = rs.boundaries[i].replace(' ', '');
            var points = str.split(';');
            for (var j = 0; j < points.length; j++) {
              var lng = points[j].split(',')[0];
              var lat = points[j].split(',')[1];
              path.push(new BMapGL.Point(lng, lat));
            }
            var prism = new BMapGL.Prism(path, 2000, {

              topFillColor: '#8de0ff',
              topFillOpacity: 0.8,
              sideFillColor: '#0e2566',
              sideFillOpacity: 0.9

            });
            this.baiduMap.addOverlay(prism);
          }
        })
        this.baiduMap.enableScrollWheelZoom();


        // bdary.get('郴州市嘉禾县',  (rs) =>  {
        //     // 绘制行政区
        //     for (var i = 0; i < rs.boundaries.length; i++) {
        //         var path = [];
        //         var xyArr = rs.boundaries[i].split(';');
        //         var ptArr = [];
        //         for (var j = 0; j < xyArr.length; j++) {
        //             var tmp = xyArr[j].split(',');
        //             var pt = new BMapGL.Point(tmp[0], tmp[1]);
        //             ptArr.push(pt);
        //         }
        //         var mapmask = new BMapGL.MapMask(ptArr, {
        //             isBuildingMask: true,
        //             isPoiMask: true,
        //             isMapMask: true,
        //             showRegion: 'inside',
        //             topFillColor: '#5679ea',
        //             topFillOpacity: 0.5,
        //             sideFillColor: '#5679ea',
        //             sideFillOpacity: 0.9
        //         });
        //         this.baiduMap.addOverlay(mapmask);
        //         var border = new BMapGL.Polyline(ptArr, {
        //             strokeColor: '#4ca7a2',
        //             strokeWeight: 3,
        //             strokeOpacity: 1
        //         });
        //         this.baiduMap.addOverlay(border);
        //     }
        // });


        this.baiduMap.setMapStyleV2({ styleJson: styleJson });
        this.baiduMap.removeEventListener('tilesloaded', this.handleEvent);
        this.baiduMap.addEventListener('tilesloaded', this.handleEvent);
        this.markList.map(r => {
          let lng = r.lng;
          let lat = r.lat;
          let pt = new BMapGL.Point(lng, lat);

          // {
          //   icon: myIcon
          // }
          var marker = new BMapGL.Marker(pt)

          this.baiduMap.addOverlay(marker);

          var sContent = `
        <div class="mapslabel">
          <div class="mapslabel-t">
            <div class="mapslabel-t-img"></div>
            ${r.name}
          </div>
          <div class="mapslabel-b">
            <div>
              <div>用电量</div>
              <div class="mapslabel-b-font" style="color:#11F150;">${r.electricity}</div>
              <span style="margin-top:0.06rem;display: inline-block;float: left;color:#11F150; font-family: Acumin-Pro-Condensed-Black-2;">kw·h</span>
            </div>
            <div>
              <div>碳排放量</div>
              <div class="mapslabel-b-font" style="color:#FBB02D;">${r.carbon}</div>
              <span style="margin-top:0.06rem;display: inline-block;float: left;color:#FBB02D;font-family: Acumin-Pro-Condensed-Black-2;">t</span>
            </div>
          </div>
        </div>
        `;
          // 将标注添加到地图
          var infoWindow = new BMapGL.InfoWindow(sContent);  // 创建信息窗口对象 
          marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow, point); //开启信息窗口
          });
        })

        // var style_map = [{
        //   // 地图背景
        //   "featureType": "land",
        //   "elementType": "all",
        //   "stylers": {
        //     "color": "#0b2555",
        //     "lightness": -1
        //   }
        // }, {
        //   // 水路背景
        //   "featureType": "water",
        //   "elementType": "all",
        //   "stylers": {
        //     "color": "#0b2555",
        //     "lightness": -1
        //   }
        // }, {
        //   //绿地背景
        //   "featureType": "green",
        //   "elementType": "all",
        //   "stylers": {
        //     "color": "#0b2555",
        //     "lightness": -1
        //   }
        // }, {
        //   //教育地区
        //   "featureType": "education",
        //   "elementType": "all",
        //   "stylers": {
        //     "color": "#0b2555",
        //     "lightness": -1
        //   }
        // }]
        //将样式加载地图中
        // this.baiduMap.setMapStyleV2({ styleJson: eval("style_map") });


        // let n = '112.37525'
        // let a = '25.63730'
        // let p = new BMapGL.Point(n, a);
        // var markers = new BMapGL.Marker(p)
        // this.baiduMap.addOverlay(markers);
        // markers.addEventListener("click", function () {
        //   console.log(1)
        //   this.openInfoWindow(infoWindow, point); //开启信息窗口
        // });
        this.baiduMap.getPanes().floatShadow.style.display = 'none';
      }

    },

    // handleEvent() {
    //   console.log('addEventListener');
    //   this.carList.map((item, index) => {
    //     this.markList.map(mark => {
    //       this.baiduMap.removeOverlay(mark);
    //     })
    //     this.markList = [];
    //     // this.queryLunz(item.deviceId, item.key, item.cardNo, index);
    //   })
    //   clearInterval(this.setInterval);
    //   let timer = 0;
    //   this.setInterval = setInterval(() => {
    //     console.log(timer++)
    //     // this.view.removeAllLayers();
    //     this.markList.map(mark => {
    //       this.baiduMap.removeOverlay(mark);
    //     })
    //     this.markList = [];
    //     // this.viewData = [];
    //     this.carList.map((item, index) => {
    //       // this.queryLunz(item.deviceId, item.key, item.cardNo, index);

    //     })
    //   }, 20 * 1000)
    // },
    //单个设备定位聚焦放大
    // queryDing
    //查询定位
    // queryLunz(deviceId, key, carNo, index) {
    //   // lunzApi.getCarUserSimpleByImei(this.appKey, deviceId).then(res1 => {
    //   // let carInfo = res1.Data;
    //   lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
    //     // 创建小车图标
    //     // var myIcon = new BMapGL.Icon(require("@/assets/images/car.png"), new BMapGL.Size(25, 25));
    //     lunzApi.getBaiduNear(this.appKey, res.Data.BaiduLat, res.Data.BaiduLng).then(res2 => {
    //       // 创建Marker标注，使用小车图标
    //       let lng = res.Data.BaiduLng;
    //       let lat = res.Data.BaiduLat;
    //       let pt = new BMapGL.Point(lng, lat);
    //       var marker = new BMapGL.Marker(pt, {
    //         icon: myIcon
    //       });
    //       // 将标注添加到地图
    //       this.baiduMap.addOverlay(marker);
    //       // this.viewData.push({
    //       //   geometry: {
    //       //     type: 'Point',
    //       //     coordinates: [lng, lat]
    //       //   },
    //       //   objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
    //       // })
    //       this.markList.push(marker);
    //       res.Data.GPSTimeStamp = res.Data.GPSTimeStamp.replace("T", " ");

    //       // let sContent = `<div style="width:3.57rem;font-size:0.14rem;line-height:0.22rem;padding:0 0.05rem 0 0.1rem;">
    //       //                   <div id="close_${deviceId}" style="display:inline-block;color:#fff;font-size:0.16rem;font-weight:bold;width:0.18rem;line-height:0.18rem;cursor:pointer;text-align:center;float:right;">x</div>
    //       //                   <div style="display:flex;align-items:center;margin-bottom:0.15rem;font-style: italic;font-size:0.2rem;font-family: FZSK;">
    //       //                     <div style="color: #ffffff;margin-right:0.1rem;">${carNo}</div>
    //       //                     <div style="display:inline-block;color:${res.Data.SbcStatus == 3 ? "#ffffff" : "#062766"};background:${res.Data.SbcStatus == 3 ? "#1dd58e !important" : "#9ab3c6 !important"};width:0.65rem;text-align:center;border-radius:100px;font-size:0.16rem;padding:0.04rem 0;">${this.locationStatus[res.Data.SbcStatus]}</div>
    //       //                     <div style="margin-left:0.35rem;color: #fff;font-style: italic;font-size:0.2rem;margin-right:0.15rem;">${res.Data.spd}km/h</div>  
    //       //                   </div>
    //       //                   <div style="display:flex;margin-bottom:0.1rem;max-width:3.5rem;"><div style="color: #ffffff;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
    //       //                   <div style="display:flex;"><div style="color: #ffffff;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
    //       //                   <div style="text-align:center;margin:0.12rem 0 0;max-width:3.25rem;"> <div style="display: inline-block;width:0.88rem;border-radius: 100px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89 !important;font-size:0.16rem;font-weight:bold;padding:0.04rem 0;" id="btnPath_${deviceId}">行车轨迹</div></div>
    //       //               </div>`;
    //       // let infoWindow = new BMapGL.InfoWindow(sContent, { width: 367, height: 220 });
    //       // // marker添加点击事件
    //       // infoWindow.addEventListener('open', () => {
    //       //   document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
    //       //     this.queryPath(deviceId)
    //       //   })
    //       //   document.getElementById('close_' + deviceId).addEventListener('click', () => {
    //       //     this.baiduMap.closeInfoWindow();
    //       //   })
    //       // });
    //       marker.addEventListener('click', () => {
    //         this.infoWindowObj = {
    //           deviceId: deviceId,
    //           carNo: carNo,
    //           obj: res.Data,
    //           position: res2.Data
    //         }
    //         this.infoShow = true;
    //         // this.openInfo(infoWindow, pt);
    //       });
    //     })

    //   })
    //   // })
    // },
    //信息窗口
    // openWindow(sContent, pt, DeviceNumber) {
    //   let infoWindow = new BMapGL.InfoWindow(sContent);
    //   // marker添加点击事件
    //   infoWindow.addEventListener('open', () => {
    //     document.getElementById('btnPath_' + DeviceNumber).addEventListener('click', () => {
    //       this.queryPath(DeviceNumber)
    //     })
    //   });
    //   this.openInfo(infoWindow, pt);
    // },wei(deviceId) {
    //   lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
    //     let lng = res.Data.BaiduLng;
    //     let lat = res.Data.BaiduLat;
    //     let pt = new BMapGL.Point(lng, lat);
    //     this.infoShow = false;
    //     this.baiduMap.centerAndZoom(pt, 18);
    //   })
    // },
    //昨日轨迹
    // queryPath(deviceId) {
    //   this.infoShow = false;
    //   let now = new Date();
    //   let yesterDay1 = now.setDate(now.getDate() - 1);
    //   let yesterDay2 = now.setDate(now.getDate() - 1);
    //   let param = {
    //     "Imei": deviceId,
    //     "StartTime": dateFormat(new Date(yesterDay2), 'yyyy-MM-dd'),
    //     "EndTime": dateFormat(new Date(yesterDay1), 'yyyy-MM-dd'),
    //     "MaxValue": 500
    //   }
    //   param = {
    //     "IMEI": deviceId,
    //     "StartDateTime": dateFormat(new Date(yesterDay2), 'yyyy-MM-dd'),
    //     "EndDateTime": dateFormat(new Date(yesterDay1), 'yyyy-MM-dd'),
    //     "MaxValues": 500,
    //     "LocType": 1
    //   }
    //   lunzApi.getLocationsByImei2(this.appKey, param).then(res => {
    //     if (res.Data == null) {
    //       this.$message({
    //         message: '未查询到今日行车轨迹',
    //         type: 'warning'
    //       });
    //       return;
    //     }
    //     let point = [];
    //     res.Data.Locations.map(item => {
    //       point.push(new BMapGL.Point(item.Lng, item.Lat));
    //     });
    //     if (this.polyline) {
    //       this.baiduMap.removeOverlay(this.polyline);
    //       this.polyline = null;
    //     }
    //     this.polyline = new BMapGL.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, })
    //     this.baiduMap.addOverlay(this.polyline);
    //     //终点标注maker
    //     if (this.endPointMarker) {
    //       this.baiduMap.removeOverlay(this.endPointMarker);
    //       this.endPointMarker = null;
    //     }
    //     // var myIcon = new BMapGL.Icon(require("@/assets/images/end_point_icon.png"), new BMapGL.Size(37, 44));
    //     // this.endPointMarker = new BMapGL.Marker(point[point.length-1], {
    //     //     icon: myIcon
    //     // });
    //     // console.log('最后一个坐标',point[point.length-1])
    //     // this.baiduMap.addOverlay(this.endPointMarker);
    //     this.baiduMap.centerAndZoom(point[0], 15);
    //     this.baiduMap.closeInfoWindow();
    //     // this.polyline = new BMapGL.Polyline(point, {
    //     //   strokeColor: '#F5533D',
    //     //   strokeWeight: 5,
    //     //   strokeOpacity: 1,
    //     // });
    //     // let trackAni = new BMapLib.TrackAnimation(this.baiduMap, this.polyline, {
    //     //   overallView: true,
    //     //   tilt: 30,
    //     //   duration: 20000,
    //     //   delay: 300
    //     // });
    //     // trackAni.start();
    //   }, error => {
    //     this.$message({
    //       message: '未查询到今日行车轨迹',
    //       type: 'warning'
    //     });
    //   })
    // },
    // openInfo(infoWindow, pt) {
    //   this.baiduMap.openInfoWindow(infoWindow, pt);
    // },
  },
}
</script>
<style>
.BMap_bubble_title {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  background: transparent !important;
}

.BMap_bubble_pop {
  width: 2.5rem !important;
  height: 1.26rem !important;
  background: url(../../../../public/img/energySourcesProvince/map3.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 1.78rem 0 0 1.24rem;
  box-sizing: border-box;
  border: 0 !important;
  background-color: transparent !important;
  border-radius: 0.1rem;
}


.mapslabel {
  width: 2.5rem !important;
  height: 1.26rem !important;
  padding-left: 0.26rem;
  margin-top: 0.1rem;
}

.mapslabel-t {
  width: 2rem;
  height: 0.32rem;
  line-height: 0.32rem;
  margin-bottom: 0.14rem;
  font-size: 0.18rem;
  font-family: Acumin-Pro-Condensed-Black-2;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.41);
}

.mapslabel-t .mapslabel-t-img {
  width: 0.22rem;
  height: 0.26rem;
  background: url(../../../../public/img/energySourcesProvince/map4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: middle;
}

.mapslabel-b {
  width: 2rem;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}

.mapslabel-b .mapslabel-b-font {
  font-size: 0.24rem;
  font-family: Acumin-Pro-Condensed-Black-2;
  margin-top: 0.04rem;
  float: left;
}



.BMap_bubble_pop .BMap_center {
  /* width: 281px !important;
    height: 100px !important;
    z-index: 99 !important; */
  /* border:0 !important;
    background: transparent !important;  */
  display: none !important;
}

.BMap_bubble_pop>img {
  display: none;
}

.BMap_bubble_pop>div:nth-child(1) {
  display: none !important;
}

/* .BMap_bubble_pop>div:nth-child(2) {
  display: none !important;
} */

.BMap_bubble_pop>div:nth-child(3) {
  display: none !important;
}

.BMap_bubble_pop>div:nth-child(5) {
  display: none !important;
}

.BMap_bubble_pop>div:nth-child(6) {
  display: none !important;
}

.BMap_bubble_pop>div:nth-child(7) {
  display: none !important;
}

.BMap_bubble_pop>div:nth-child(8) {
  display: none !important;
}


/*替换关闭按钮*/
/* img[src="http://api0.map.bdimg.com/images/iw_close1d3.gif"]{
    content: url('http://vino.test.bidostar.cn/iw_close1d3.png');
} */
/*替换剪头*/
/* img[src="http://api0.map.bdimg.com/images/iw3.png"]{
    opacity:0;
    margin-top: -692px !important;
    filter:alpha(opacity=70);
    content: url('../../../../public/img/3.png');
} */
</style>

<style lang="scss" scoped>
.map_warp {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.infoPop {
  position: absolute;
  width: 3.67rem;
  height: 2.2rem;
  color: #fff;
  font-size: 0.14rem;
  line-height: 0.2rem;
  left: 50%;
  top: 50%;
  margin: -1.1rem 0 0 -1.835rem;
  // background: url(@/assets/images/infowindow_bg.png) no-repeat;
  background-size: 100% 100%;

  div {
    color: #fff;
  }

  .close_act {
    text-align: right;
    padding: 0.2rem 0.2rem 0;
    cursor: pointer;
  }

  .base_info {
    display: flex;
    align-items: center;
    margin-bottom: 0.15rem;
    color: #fff;
    font-style: italic;
    font-size: 0.2rem;
    font-family: FZSK;
    padding: 0 0.2rem;

    .car_status {
      display: inline-block;
      color: #062766;
      background: #9ab3c6;
      width: 0.65rem;
      text-align: center;
      border-radius: 100px;
      font-size: 0.16rem;
      padding: 0.04rem 0;
      margin-left: 0.15rem;

      &.on {
        color: #ffffff;
        background: #1dd58e;
      }
    }

    .car_speed {
      margin-left: 0.35rem;
      margin-right: 0.15rem;
    }
  }

  .flex_box {
    display: flex;
    padding: 0 0.2rem;
    margin-bottom: 0.1rem;
  }

  .path_box {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.15rem;

    .path_btn {
      display: inline-block;
      width: 0.88rem;
      border-radius: 100px;
      text-align: center;
      color: #1b2f57;
      font-style: italic;
      font-family: FZSK;
      cursor: pointer;
      background: #facd89;
      font-size: 0.16rem;
      font-weight: bold;
      padding: 0.04rem 0;
      margin: 0 auto;
    }
  }
}

.mapsbtn {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 999;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: red;
  cursor: pointer;
}
</style>