diff --git a/public/index.html b/public/index.html index 629936a..d630e76 100644 --- a/public/index.html +++ b/public/index.html @@ -7,9 +7,10 @@ <%= htmlWebpackPlugin.options.title %> - + + diff --git a/src/views/components/pathMap.vue b/src/views/components/pathMap.vue index 56da3ba..c6113c3 100644 --- a/src/views/components/pathMap.vue +++ b/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) { - clearInterval(this.setInterval); + // if (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'// - // }); - this.baiduMap.setMapStyleV2({ - styleJson: styleJson - }) + // 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); - var marker = new BMapGL.Marker(pt, { + let pt = new BMap.Point(lng, lat); + var marker = new BMap.Marker(pt, { icon: myIcon }); // 将标注添加到地图 @@ -163,14 +161,14 @@ export default { let sContent = `
${carNo}
-
${this.locationStatus[res.Data.SbcStatus]}
+
${this.locationStatus[res.Data.SbcStatus]}
${res.Data.spd}km/h
设备位置：
${res2.Data}
最后定位时间：
${res.Data.GPSTimeStamp.replace("T", " ")}
-
行车轨迹
+
行车轨迹
`; - 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 = `
//
车牌号：${obj.carNo}
//
设备位置：${obj.res2Data}
@@ -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)); - // this.endPointMarker = new BMapGL.Marker(point[point.length-1], { + // var myIcon = new BMap.Icon(require("@/assets/images/end_point_icon.png"), new BMap.Size(37, 44)); + // 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,