地图更换版本

public/index.html

@@ -7,9 +7,10 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <!-- <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script> -->
-    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=FLPUL1102GNBvV2nVDy5kDIjYM9VGyYl"></script>
+    <!-- <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=FLPUL1102GNBvV2nVDy5kDIjYM9VGyYl"></script> -->
     <!-- <script src="//mapv.baidu.com/build/mapv.min.js"></script> -->
     <!-- <script src="https://unpkg.com/mapvgl@1.0.0-beta.168/dist/mapvgl.min.js"></script> -->
+    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=FLPUL1102GNBvV2nVDy5kDIjYM9VGyYl"></script>
     <style>
       *{
         padding: 0;

src/App.vue

@@ -15,33 +15,63 @@
   color: #2c3e50;
   overflow: hidden;
 }
-.el-message{
+
-  padding:0.2rem !important;
+.el-message {
+  padding: 0.2rem !important;
+}
+
+.el-message__icon,
+.el-message__content {
+  font-size: 16px !important;
 }
-.el-message__icon,.el-message__content{
+
-		font-size: 16px !important;
+.BMap_pop {
+  margin-top: 0.5rem;
+  div{
+    border: 0 !important;
+    background-color: transparent !important;
+  }
+  div{
+    img{
+      display: none;
+    }
+  }
+  .BMap_center{
+    top: -0.2rem !important;
+    height: 2.2rem !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;
+  }
 }
-.BMap_bubble_pop{
+
+.BMap_bubble_pop {
   color: #fff !important;
   max-width: 3.67rem;
-  height:2.2rem !important;
+  height: 2.2rem !important;
-  padding:0 !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{
+
+  img {
     display: none !important;
   }
 }
-.BMap_bubble_buttons{
+
-  div{
+.BMap_bubble_buttons {
-    color:#fff !important;
+  div {
-    font-size:0.4rem !important;
+    color: #fff !important;
+    font-size: 0.4rem !important;
   }
 }
-.BMap_cpyCtrl,.anchorBL{
+
+.BMap_cpyCtrl,
+.anchorBL {
   opacity: 0 !important;
 }
 </style>

src/views/components/pathMap.vue

@@ -23,50 +23,48 @@ export default {
     }
   },
   beforeDestroy() {
-    if (this.setInterval) {
+    clearInterval(this.setInterval);
-      clearInterval(this.setInterval);
+    console.log('销毁');
-    }
   },
   beforeCreate() {
-    if (this.setInterval) {
+    clearInterval(this.setInterval);
-      clearInterval(this.setInterval);
-    }
   },
   mounted() {
     this.initMap();
     window.addEventListener('resize', () => {
-      if (this.setInterval) {
+      // if (this.setInterval) {
-        clearInterval(this.setInterval);
+      //   clearInterval(this.setInterval);
+      // }
+      // this.initMap();
+      if (this.baiduMap) {
+        this.baiduMap.centerAndZoom(point, 11);
       }
-      this.initMap();
     });
   },
   methods: {
     //回到原中心点
     backMap() {
-      var point = new BMapGL.Point(118.880278, 35.649947);
+      var point = new BMap.Point(118.880278, 35.649947);
       this.baiduMap.centerAndZoom(point, 11);
     },
     initMap() {
-      var point = new BMapGL.Point(118.880278, 35.649947);
+      var point = new BMap.Point(118.880278, 35.649947);
       if (this.baiduMap) {
         this.baiduMap.centerAndZoom(point, 11);
       }
       else {
-        this.baiduMap = new BMapGL.Map('container');
+        this.baiduMap = new BMap.Map('container');
         this.baiduMap.centerAndZoom(point, 11);
         this.baiduMap.enableScrollWheelZoom(true);
+        this.baiduMap.setMapStyle({style:'midnight'});
         // this.baiduMap.setMapStyleV2({
-        //   styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
+        //   styleJson: styleJson
-        // });
+        // })
-        this.baiduMap.setMapStyleV2({
-          styleJson: styleJson
-        })
         // alert('自定义样式')
         // this.view = new mapvgl.View({
         //   map: this.baiduMap
         // });
-        var bdary = new BMapGL.Boundary();
+        var bdary = new BMap.Boundary();
         bdary.get("日照市莒县", rs => {
           var count = rs.boundaries.length;
           for (var i = 0; i < count; i++) {
@@ -74,10 +72,10 @@ export default {
             var ptArr = [];
             for (var j = 0; j < xyArr.length; j++) {
               var tmp = xyArr[j].split(',');
-              var pt = new BMapGL.Point(tmp[0], tmp[1]);
+              var pt = new BMap.Point(tmp[0], tmp[1]);
               ptArr.push(pt);
             }
-            // var mapmask = new BMapGL.MapMask(ptArr, {
+            // var mapmask = new BMap.MapMask(ptArr, {
             //   isBuildingMask: true,
             //   isPoiMask: true,
             //   isMapMask: true,
@@ -88,18 +86,17 @@ export default {
             //   sideFillOpacity: 0.9
             // });
             // this.baiduMap.addOverlay(mapmask);
-            var border = new BMapGL.Polyline(ptArr, {
+            var border = new BMap.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, }); //建立多边形覆盖物
+            // var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物
             // this.baiduMap.addOverlay(ply);  //添加覆盖物
           }
         })
         this.baiduMap.removeEventListener('tilesloaded', this.handleEvent);
-        console.log('removeEventListener');
         this.baiduMap.addEventListener('tilesloaded', this.handleEvent);
       }
 
@@ -113,6 +110,7 @@ export default {
         this.markList = [];
         this.queryLunz(item.deviceId, item.key, item.cardNo, index);
       })
+      clearInterval(this.setInterval);
       this.setInterval = setInterval(() => {
         // this.view.removeAllLayers();
         this.markList.map(mark => {
@@ -131,7 +129,7 @@ export default {
       lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
         let lng = res.Data.BaiduLng;
         let lat = res.Data.BaiduLat;
-        let pt = new BMapGL.Point(lng, lat);
+        let pt = new BMap.Point(lng, lat);
         this.baiduMap.centerAndZoom(pt, 18);
       })
     },
@@ -141,13 +139,13 @@ export default {
       // 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));
+        var myIcon = new BMap.Icon(require("@/assets/images/car.png"), new BMap.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);
+          let pt = new BMap.Point(lng, lat);
-          var marker = new BMapGL.Marker(pt, {
+          var marker = new BMap.Marker(pt, {
             icon: myIcon
           });
           // 将标注添加到地图
@@ -163,14 +161,14 @@ export default {
           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: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" : "#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="display:inline-block;color:${res.Data.SbcStatus == 3 ? "#ffffff" : "#062766"};background:${res.Data.SbcStatus == 3 ? "#1dd58e !important" : "#9ab3c6 !important"};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: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.2rem;"><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;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 style="text-align:center;margin:0.12rem 0 0;max-width:3.25rem;"> <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 !important;font-size:0.18rem;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div>
                         </div>`;
-          let infoWindow = new BMapGL.InfoWindow(sContent, { width: '3.67rem', height: '2.2rem' });
+          let infoWindow = new BMap.InfoWindow(sContent, { width: 367, height: 220 });
           // marker添加点击事件
           infoWindow.addEventListener('open', () => {
             document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
@@ -209,7 +207,7 @@ export default {
           //           let obj = e.dataItem.objdata;
           //           let lng = obj.resData.BaiduLng;
           //           let lat = obj.resData.BaiduLat;
-          //           let pt = new BMapGL.Point(lng, lat);
+          //           let pt = new BMap.Point(lng, lat);
           //           let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
           //                   <div>车牌号：${obj.carNo}</div>
           //                   <div>设备位置：${obj.res2Data}</div>
@@ -235,7 +233,7 @@ export default {
     },
     //信息窗口
     openWindow(sContent, pt, DeviceNumber) {
-      let infoWindow = new BMapGL.InfoWindow(sContent);
+      let infoWindow = new BMap.InfoWindow(sContent);
       // marker添加点击事件
       infoWindow.addEventListener('open', () => {
         document.getElementById('btnPath_' + DeviceNumber).addEventListener('click', () => {
@@ -272,33 +270,33 @@ export default {
         }
         let point = [];
         res.Data.Locations.map(item => {
-          point.push(new BMapGL.Point(item.Lng, item.Lat));
+          point.push(new BMap.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.polyline = new BMap.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));
+        // var myIcon = new BMap.Icon(require("@/assets/images/end_point_icon.png"), new BMap.Size(37, 44));
-        // this.endPointMarker = new BMapGL.Marker(point[point.length-1], {
+        // this.endPointMarker = new BMap.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, {
+        // this.polyline = new BMap.Polyline(point, {
         //   strokeColor: '#F5533D',
         //   strokeWeight: 5,
         //   strokeOpacity: 1,
         // });
-        // let trackAni = new BMapGLLib.TrackAnimation(this.baiduMap, this.polyline, {
+        // let trackAni = new BMapLib.TrackAnimation(this.baiduMap, this.polyline, {
         //   overallView: true,
         //   tilt: 30,
         //   duration: 20000,