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