地图加载优化

src/App.vue

@@ -23,12 +23,14 @@
 }
 .BMap_bubble_pop{
   color: #fff !important;
-  height:220px !important;
+  max-width: 3.67rem;
+  height:2.2rem !important;
   padding:0 !important;
   background-image: url(@/assets/images/infowindow_bg.png) !important;
   background-color: transparent !important;
   background-repeat: no-repeat;
   border: 0 !important;
+  background-size: 100% 100% !important;
   img{
     display: none !important;
   }

src/views/components/pathMap.vue

@@ -48,16 +48,21 @@ export default {
       this.baiduMap.centerAndZoom(point, 11);
     },
     initMap() {
-      this.baiduMap = new BMapGL.Map('container');
       var point = new BMapGL.Point(118.880278, 35.649947);
+      if (this.baiduMap) {
+        this.baiduMap.centerAndZoom(point, 11);
+      }
+      else {
+        this.baiduMap = new BMapGL.Map('container');
         this.baiduMap.centerAndZoom(point, 11);
         this.baiduMap.enableScrollWheelZoom(true);
         // this.baiduMap.setMapStyleV2({
         //   styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
         // });
         this.baiduMap.setMapStyleV2({
-        styleJson
+          styleJson: styleJson
         })
+        alert('自定义样式')
         // this.view = new mapvgl.View({
         //   map: this.baiduMap
         // });
@@ -93,7 +98,14 @@ export default {
             // this.baiduMap.addOverlay(ply);  //添加覆盖物
           }
         })
-      this.baiduMap.addEventListener('tilesloaded', () => {
+        this.baiduMap.removeEventListener('tilesloaded', this.handleEvent);
+        console.log('removeEventListener');
+        this.baiduMap.addEventListener('tilesloaded', this.handleEvent);
+      }
+
+    },
+    handleEvent() {
+      console.log('addEventListener');
       this.carList.map((item, index) => {
         this.markList.map(mark => {
           this.baiduMap.removeOverlay(mark);
@@ -113,8 +125,6 @@ export default {
 
         })
       }, 20 * 1000)
-      })
-
     },
     //单个设备定位聚焦放大
     queryDingwei(deviceId) {
@@ -150,17 +160,17 @@ export default {
           //   objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
           // })
           this.markList.push(marker);
-          let sContent = `<div style="font-size:14px;line-height:22px;padding:0 0 0 25px;">
+          let sContent = `<div style="font-size:0.14rem;line-height:0.22rem;padding:0 0.05rem 0 0.25rem;">
-                            <div style="display:flex;align-items:center;margin-bottom:20px;font-style: italic;font-size:20px;font-family: FZSK;">
+                            <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:15px;">${carNo}</div>
+                              <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":"#9ab3c6"};width:50px;height:24px;line-height:24px;text-align:center;border-radius:12px;font-size:16px;">${this.locationStatus[res.Data.SbcStatus]}</div>
+                              <div style="display:inline-block;color:${res.Data.SbcStatus == 3 ? "#ffffff" : "#062766"};background:${res.Data.SbcStatus == 3 ? "#1dd58e" : "#9ab3c6"};width:0.65rem;height:0.24rem;line-height:0.24rem;text-align:center;border-radius:0.12rem;font-size:0.16rem;">${this.locationStatus[res.Data.SbcStatus]}</div>
-                              <div style="margin-left:45px;color: #fff;font-style: italic;font-size:20px;margin-right:15px;">${res.Data.spd}km/h</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:10px;"><div style="color: #ffffff;width:80px;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
+                            <div style="display:flex;margin-bottom:0.1rem;max-width:3.2rem;"><div style="color: #ffffff;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
-                            <div style="display:flex;"><div style="color: #ffffff;width:100px;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</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:15px 0 0;"> <div style="display: inline-block;width:88px;height:30px;line-height:30px;border-radius: 15px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89;font-size:18px;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div>
+                            <div style="text-align:center;margin:0.12rem 0 0;"> <div style="display: inline-block;width:0.88rem;height:0.3rem;line-height:0.3rem;border-radius: 0.15rem;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89;font-size:0.18rem;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div>
                         </div>`;
-          let infoWindow = new BMapGL.InfoWindow(sContent,{width:367,height:220});
+          let infoWindow = new BMapGL.InfoWindow(sContent, { width: '3.67rem', height: '2.2rem' });
           // marker添加点击事件
           infoWindow.addEventListener('open', () => {
             document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {