suojin
/
physical_distribution
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

infowindow弹框改为自开发

Browse Source
main
xuechunyuan 3 years ago
parent 84218f890c
commit cbc0cdf271
2 changed files with 151 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/App.vue
  2. 173
      src/views/components/pathMap.vue

4
src/App.vue
Unescape View File

@ -33,8 +33,8 @@
background-color: transparent !important;
}
div:nth-child(9){
top: 0.1rem !important;
left: 0.1rem !important;
top:0.1rem !important;
left:0.1rem !important;
}
img {

173
src/views/components/pathMap.vue
Unescape View File

@ -1,9 +1,31 @@
<template>
<div id="container" style="width:100%;height:100%;"></div>
<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 class="path_btn">行程轨迹</div>
</div>
</div>
</div>
</template>
<script>
import { lunzApi, appKey, key, carList, styleJson } from "@/api/data";
import { lunzApi, appKey, key, carList } from "@/api/data";
import { dateFormat } from "@/util/date";
export default {
data() {
@ -20,6 +42,12 @@ export default {
polyline: null,//昨日轨迹
viewData: [],//点聚合坐标集合
// endPointMarker:null,//轨迹终点标记
infoWindowObj: {
obj: {
SbcStatus: 2
}
},//
infoShow: false,
}
},
beforeDestroy() {
@ -44,6 +72,8 @@ export default {
backMap() {
var point = new BMap.Point(118.880278, 35.649947);
this.baiduMap.centerAndZoom(point, 11);
// this.baiduMap.closeInfoWindow();
this.infoShow = false;
},
initMap() {
var point = new BMap.Point(118.880278, 35.649947);
@ -158,29 +188,37 @@ export default {
// objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
// })
this.markList.push(marker);
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();
})
});
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.openInfo(infoWindow, pt);
this.infoWindowObj = {
carNo: carNo,
obj: res.Data,
position: res2.Data
}
this.infoShow = true;
// this.openInfo(infoWindow, pt);
});
})
@ -279,4 +317,91 @@ export default {
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>
Write Preview
Loading…
Cancel
Save