main
jn517618
2 years ago
parent
5d3e5c93c7
commit
5d7447740b
16 changed files with 732 additions and 12 deletions
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,653 @@ |
||||
<template> |
||||
<div style="position:relative;width:100%;height:100%;"> |
||||
<div id="container" style="width:100%;height:100%;"></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 { 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: "福顺机械实业公司" }, |
||||
{ lng: 112.37268, lat: 25.63787, name: "巨人机床实业公司" }, |
||||
{ lng: 112.37268, lat: 25.63787, name: "郴州雄建实业公司" }, |
||||
{ lng: 112.36587, lat: 25.63132, name: "众合实业公司" }, |
||||
{ lng: 112.37268, lat: 25.63787, name: "雄达实业公司" }, |
||||
{ lng: 112.37275, lat: 25.63676, name: "伟铸机械实业公司" }, |
||||
],//标注点记录 |
||||
polyline: null,//昨日轨迹 |
||||
viewData: [],//点聚合坐标集合 |
||||
// endPointMarker:null,//轨迹终点标记 |
||||
infoWindowObj: { |
||||
obj: { |
||||
SbcStatus: 2 |
||||
} |
||||
},// |
||||
infoShow: false, |
||||
} |
||||
}, |
||||
beforeDestroy() { |
||||
// clearInterval(this.setInterval); |
||||
// console.log('销毁'); |
||||
}, |
||||
beforeCreate() { |
||||
// clearInterval(this.setInterval); |
||||
}, |
||||
created() { |
||||
}, |
||||
mounted() { |
||||
setTimeout(() => { |
||||
this.initMap(); |
||||
}, 0); |
||||
window.addEventListener('resize', () => { |
||||
if (this.baiduMap) { |
||||
this.backMap(); |
||||
} |
||||
}); |
||||
}, |
||||
methods: { |
||||
//回到原中心点 |
||||
backMap() { |
||||
var point = new BMap.Point(118.880278, 35.649947); |
||||
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 BMap.Point(112.37558, 25.59342); |
||||
if (this.baiduMap) { |
||||
this.baiduMap.centerAndZoom(point, 12); |
||||
} |
||||
else { |
||||
this.baiduMap = new BMap.Map('container'); |
||||
this.baiduMap.centerAndZoom(point, 12); |
||||
this.baiduMap.enableScrollWheelZoom(true); |
||||
// var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL } |
||||
// this.baiduMap.addControl(new BMap.NavigationControl(opts)); |
||||
this.baiduMap.setMapStyle({ style: 'midnight' }); |
||||
// this.baiduMap.setMapStyleV2({ |
||||
// styleJson: styleJson |
||||
// }) |
||||
// alert('自定义样式') |
||||
// this.view = new mapvgl.View({ |
||||
// map: this.baiduMap |
||||
// }); |
||||
var bdary = new BMap.Boundary(); |
||||
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 BMap.Point(tmp[0], tmp[1]); |
||||
ptArr.push(pt); |
||||
} |
||||
// var mapmask = new BMap.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 BMap.Polyline(ptArr, { |
||||
strokeColor: '#0e94eb', |
||||
strokeWeight: 3, |
||||
strokeOpacity: 1 |
||||
}); |
||||
this.baiduMap.addOverlay(border); |
||||
// 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); |
||||
this.baiduMap.addEventListener('tilesloaded', this.handleEvent); |
||||
let lng = '112.37268'; |
||||
let lat = '25.63787'; |
||||
let pt = new BMap.Point(lng, lat); |
||||
// { |
||||
// icon: myIcon |
||||
// } |
||||
var marker = new BMap.Marker(pt) |
||||
|
||||
this.baiduMap.addOverlay(marker); |
||||
var opts = { |
||||
width: 10, // 信息窗口宽度 |
||||
height: 10, // 信息窗口高度 |
||||
title: "", // 信息窗口标题 |
||||
message: "" |
||||
}; |
||||
|
||||
var sContent = ` |
||||
<div class="mapslabel"> |
||||
<div class="mapslabel-t"> |
||||
<div class="mapslabel-t-img"></div> |
||||
复制 |
||||
</div> |
||||
<div class="mapslabel-b"> |
||||
<div> |
||||
<div>用电量</div> |
||||
<div class="mapslabel-b-font">111</div> |
||||
<span style="margin-top:10px;display: inline-block;float: left;">kw·h</span> |
||||
</div> |
||||
<div> |
||||
<div>碳排放量</div> |
||||
<div class="mapslabel-b-font">1111</div> |
||||
<span style="margin-top:10px;display: inline-block;float: left;">t</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
// 将标注添加到地图 |
||||
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象 |
||||
marker.addEventListener("click", function () { |
||||
console.log(1) |
||||
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 BMap.Point(n, a); |
||||
// var markers = new BMap.Marker(p) |
||||
// this.baiduMap.addOverlay(markers); |
||||
// markers.addEventListener("click", function () { |
||||
// console.log(1) |
||||
// this.openInfoWindow(infoWindow, point); //开启信息窗口 |
||||
// }); |
||||
this.baiduMap.getPanes().floatShadow.style.display = 'none'; |
||||
} |
||||
|
||||
}, |
||||
// 将标注添加到地图 |
||||
addMarker() { |
||||
let arr = [ |
||||
|
||||
] |
||||
}, |
||||
// 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 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 BMap.Point(lng, lat); |
||||
// var marker = new BMap.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 BMap.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 BMap.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 BMap.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 BMap.Point(item.Lng, item.Lat)); |
||||
// }); |
||||
// if (this.polyline) { |
||||
// this.baiduMap.removeOverlay(this.polyline); |
||||
// this.polyline = null; |
||||
// } |
||||
// 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 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 BMap.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_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: 160px 0 0 138px; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
|
||||
.mapslabel { |
||||
width: 2.5rem !important; |
||||
height: 1.26rem !important; |
||||
padding-left: 20px; |
||||
margin-top: -4px; |
||||
} |
||||
|
||||
.mapslabel-t { |
||||
width: 2rem; |
||||
height: 0.32rem; |
||||
line-height: 0.32rem; |
||||
margin-bottom: 14px; |
||||
font-size: 0.18rem; |
||||
font-family: Microsoft YaHei; |
||||
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 Variable Concept; |
||||
margin-top: 0.06rem; |
||||
float: left; |
||||
} |
||||
|
||||
|
||||
|
||||
.BMap_pop .BMap_center { |
||||
/* width: 281px !important; |
||||
height: 100px !important; |
||||
z-index: 99 !important; */ |
||||
/* border:0 !important; |
||||
background: transparent !important; */ |
||||
display: none !important; |
||||
} |
||||
|
||||
.BMap_pop>img { |
||||
display: none; |
||||
} |
||||
|
||||
.BMap_pop>div:nth-child(1) { |
||||
display: none !important; |
||||
} |
||||
|
||||
.BMap_pop>div:nth-child(2) { |
||||
display: none !important; |
||||
} |
||||
|
||||
.BMap_pop>div:nth-child(3) { |
||||
display: none !important; |
||||
} |
||||
|
||||
.BMap_pop>div:nth-child(5) { |
||||
display: none !important; |
||||
} |
||||
|
||||
.BMap_pop>div:nth-child(6) { |
||||
display: none !important; |
||||
} |
||||
|
||||
.BMap_pop>div:nth-child(7) { |
||||
display: none !important; |
||||
} |
||||
|
||||
.BMap_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; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue