地图优化

src/App.vue

@@ -21,6 +21,24 @@
 .el-message__icon,.el-message__content{
 		font-size: 16px !important;
 }
+.BMap_bubble_pop{
+  color: #fff !important;
+  height:220px !important;
+  padding:0 !important;
+  background-image: url(http://192.168.1.36:8080/img/infowindow_bg.df8cbca1.png) !important;
+  background-color: transparent !important;
+  background-repeat: no-repeat;
+  border: 0 !important;
+  img{
+    display: none !important;
+  }
+}
+.BMap_bubble_buttons{
+  div{
+    color:#fff !important;
+    font-size:0.4rem !important;
+  }
+}
 .BMap_cpyCtrl,.anchorBL{
   opacity: 0 !important;
 }

src/views/components/pathMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="container" style="width:100%;height:100%"></div>
+  <div id="container" style="width:100%;height:100%;"></div>
 </template>
 
 <script>
@@ -19,6 +19,7 @@ export default {
       markList: [],//标注点记录
       polyline: null,//昨日轨迹
       viewData: [],//点聚合坐标集合
+      // endPointMarker:null,//轨迹终点标记
     }
   },
   beforeDestroy() {
@@ -41,17 +42,22 @@ export default {
     });
   },
   methods: {
+    //回到原中心点
+    backMap() {
+      var point = new BMapGL.Point(118.880278, 35.649947);
+      this.baiduMap.centerAndZoom(point, 11);
+    },
     initMap() {
       this.baiduMap = new BMapGL.Map('container');
       var point = new BMapGL.Point(118.880278, 35.649947);
       this.baiduMap.centerAndZoom(point, 11);
       this.baiduMap.enableScrollWheelZoom(true);
-      this.baiduMap.setMapStyleV2({
-        styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
-      });
       // this.baiduMap.setMapStyleV2({
-      //   styleJson
-      // })
+      //   styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
+      // });
+      this.baiduMap.setMapStyleV2({
+        styleJson
+      })
       // this.view = new mapvgl.View({
       //   map: this.baiduMap
       // });
@@ -71,6 +77,10 @@ export default {
           //   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, {
@@ -78,7 +88,7 @@ export default {
             strokeWeight: 3,
             strokeOpacity: 1
           });
-          // this.baiduMap.addOverlay(border);
+          this.baiduMap.addOverlay(border);
           // var ply = new BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物
           // this.baiduMap.addOverlay(ply);  //添加覆盖物
         }
@@ -140,15 +150,17 @@ export default {
           //   objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
           // })
           this.markList.push(marker);
-          let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
-                            <div>车牌号：${carNo}</div>
-                            <div>设备位置：${res2.Data}</div>
-                            <div>最后定位时间：${res.Data.GPSTimeStamp.replace("T", " ")}</div>
-                            <div>状态：${this.locationStatus[res.Data.SbcStatus]}</div>
-                            <div>时速：${res.Data.spd}km/h</div>
-                            <div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${deviceId}">行车轨迹</div>
+          let sContent = `<div style="font-size:14px;line-height:22px;padding:0 0 0 25px;">
+                            <div style="display:flex;align-items:center;margin-bottom:20px;font-style: italic;font-size:20px;font-family: FZSK;">
+                              <div style="color: #ffffff;margin-right:15px;">${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="margin-left:45px;color: #fff;font-style: italic;font-size:20px;margin-right:15px;">${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;"><div style="color: #ffffff;width:100px;">最后定位时间：</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>`;
-          let infoWindow = new BMapGL.InfoWindow(sContent);
+          let infoWindow = new BMapGL.InfoWindow(sContent,{width:367,height:220});
           // marker添加点击事件
           infoWindow.addEventListener('open', () => {
             document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
@@ -249,8 +261,19 @@ export default {
           this.baiduMap.removeOverlay(this.polyline);
           this.polyline = null;
         }
-        this.polyline = new BMapGL.Polyline(point, { strokeColor: '#F5533D', strokeWeight: 5, strokeOpacity: 1, })
+        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, {