suojin
/
jiahe_device
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
嘉禾二期设备管理
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 Commits
1 Branch
0 Tags
696 MiB
 
 
 
Tag: Branch: Tree: 7cf4672e55
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '7cf4672e55'
${ noResults }
jiahe_device/src/views/energySourcesProvince/component/pathMap.vue

778 lines
26 KiB
Raw Blame History

<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>