<template>
<div>
<baidu
-map id="allmap"
:center="center"
:zoom="zoom" @ready="handler" style="height
:9.45rem;width
: 100%;" @click="getClickInfo"
:scroll
-wheel
-zoom='true'>
<div class="drawing
-panel" style="z
-index
: 99;">
<button class = "btn" @click='play(1)' size="small">播放</button>
<button class = "btn" @click='play(2)' size="small">暂停</button>
<button class = "btn" @click='play(3)' size="small">停止</button>
</div>
</baidu
-map>
</div>
</template>
<script>
export default {
name
: 'BtAddrBaiDu',
data () {
return {
startTime
: null,
endTime
: null,
center
: {lng
: 114.085947, lat
: 22.547},
zoom
: 15,
point
:"",
gpsArr
:[
{
lng
:114.000069,
lat
:22.500069
},
],
speed
:500,
lushu
:{},
batteryId
:"电池编号
:"+this.$parent.$
children[0].hwid,
myMap
: {}
}
},
mounted(){
this.handler()
},
methods
: {
filterByTime(){
this.handler()
},
handler({BMap, map}){
this.$nextTick(()=>{
this.$http({
url
: this.$http.adornUrl('/mqtt/mtgpslocationinfo/queryGpsLocationInfos'),
method
: 'get',
params
: this.$http.adornParams({
'startTime'
: this.startTime,
'endTime'
: this.endTime,
'thingid'
: this.$parent.$
children[0].hwid
})
}).then(({data}) => {
map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15);
map.centerAndZoom();
var arrPois = [];
if (data && data.code === 0) {
const socitem = data.data
if (socitem && socitem.length > 0) {
let clng = socitem[socitem.length
-1].longitude;
let clat = socitem[socitem.length
-1].latitude;
this.center = {lng
: clng, lat
: clat};
var myIcon = new BMap.Icon(
require("../../../assets/img/markers.png"),
new BMap.Size(23, 25), {
offset
: new BMap.Size(10, 25),
image
Offset
: new BMap.Size(0, 0
- 11 * 25)
});
for (let i = 0; i < socitem.length; i++) {
var p0 = socitem[i].longitude;
var p1 = socitem[i].latitude;
var point = new BMap.Point(p0, p1);
arrPois.push(point);
var distance = this.getDistance(clat,clng, p1,p0);
var content = "<table style='color
: #FFF;'>";
content = content + "<tr><td> 电池编号："+socitem[i].thingId+"</td></tr>";
content = content + "<tr><td> 经纬度："+socitem[i].longitudedirectionValue+socitem[i].longitude+"，"+socitem[i].latitudedirectionValue+socitem[i].latitude+"</td></tr>";
content = content + "<tr><td> 与最新点距离："+distance.t
oFixed(2)+"m</td></tr>";
content = content + "<tr><td> 时间："+socitem[i].uploadTime+"</td></tr>";
content += "</table>";
var marker = this.createMarker(
point,
content,
socitem[i].thingId,
i,
myIcon
);
map.addOverlay(marker)
var circle = new BMap.Circle(point, 6, { strokeColor
: 'Red', strokeWeight
: 8, strokeOpacity
: 2, Color
: 'Blue', fillColor
: '#f03' })
map.addOverlay(circle)
}
} else {
console.log('没有数据的显示')
this.soctitle = '暂无数据显示'
}
} else {
console.log('没有数据的显示')
this.noneTitle = '没有数据~'
}
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
scale
: 0.3,
strokeColor
:'#fff',
strokeWeight
: 1
});
var icons = new BMap.IconSequence(sy, '100%', '5%',false);
var polyLine = new BMap.Polyline(arrPois, {
strokeWeight
: 2,
strokeOpacity
: 0.5,
strokeColor
:"#30
3133",
enableEditing
: false,
enableClicking
: false,
icons
:[icons]
});
map.addOverlay(polyLine);
BMapLib.LuShu.proto
type._move = function(initPos, targetPos, effect) {
var pointsArr = [initPos, targetPos];
var me = this,
currentCount = 0,
timer = 10,
step = this._opts.speed / (1000 / timer),
init_pos = this._projection.lngLatToPoint(initPos),
target_pos = this._projection.lngLatToPoint(targetPos),
count = Math.round(me._getDistance(init_pos, target_pos) / step);
this._map.addOverlay(
new BMap.Polyline(pointsArr, {
strokeColor
: "#111",
strokeWeight
: 3,
strokeOpacity
: 0.5
})
);
if (count < 1) {
me._moveNext(++me.i);
return;
}
me._intervalFlag = setInterval(function() {
if (currentCount >= count) {
clearInterval(me._intervalFlag);
if (me.i > me._path.length) {
return;
}
me._moveNext(++me.i);
} else {
currentCount++;
var x = effect(init_pos.x, target_pos.x, currentCount, count),
y = effect(init_pos.y, target_pos.y, currentCount, count),
pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
if (currentCount == 1) {
var proPos = null;
if (me.i
- 1 >= 0) {
proPos = me._path[me.i
- 1];
}
if (me._opts.enableRotation == true) {
me.setRotation(proPos, initPos, targetPos);
}
if (me._opts.autoView) {
if (!me._map.getBounds().containsPoint(pos)) {
me._map.setCenter(pos);
}
}
}
me._marker.setPosition(pos);
me._setInfoWin(pos);
}
}, timer);
};
map.addControl(new BMap.OverviewMapControl({isOpen
:true,anchor
:BMAP_ANCHOR_BOTTOM_RIGHT}));
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl({anchor
:BMAP_ANCHOR_TOP_LEFT}));
map.addControl(new BMap.Map
TypeControl({map
Types
: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],anchor
: BMAP_ANCHOR_TOP_RIGHT}));
this.initLushu(map, arrPois, this.batteryId);
})
})
},
getDistance(lat1,lng1,lat2,lng2) {
let EARTH_RADIUS = 6378.137;
let radLat1 = this.rad(lat1);
let radLat2 = this.rad(lat2);
let a = radLat1
- radLat2;
let b = this.rad(lng1)
- this.rad(lng2);
let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
+ Math.cos(radLat1) * Math.cos(radLat2)
* Math.pow(Math.sin(b / 2), 2)));
s = s * EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
s = s*1000;
return s;
},
rad(d){
return d * Math.PI / 180.0;
},
initLushu(map, arrPois, batteryId) {
this.lushu = new BMapLib.LuShu(map, arrPois, {
defaultContent
: batteryId,
autoView
: true,
icon
: new BMap.Icon(
require("../../../assets/img/mybike2.png"),
new BMap.Size(52, 26),
{
anchor
: new BMap.Size(27, 13)
}
),
speed
: this.speed,
enableRotation
: true,
landmarkPois
: [
{
lng
:114.52785300795644,
lat
:38.14758574827796,
html
: "加油站",
pauseTime
: 2
}
]
});
},
play(val) {
if (this.arrIndex >= this.gpsArr.length
- 3) {
this.arrIndex = 0;
}
switch (val) {
case 1
:
this.lushu.start();
break;
case 2
:
this.lushu.pause();
break;
case 3
:
this.lushu.stop();
this.arrIndex = 0;
this.percentage = 0;
break;
}
},
createMarker(point, iw, paramNumber,i,myIcon) {
var markerx = new BMap.Marker(point);
var label = new BMap.Label(i+1, {
offset
:new BMap.Size(
-3,
-5)});
label.setStyle({
background
:'url()',
color
:'#fff',
border
:'none',
fontSize
:'12px',
textAlign
:'center',
width
:'25px',
height
:'25px',
lineHeight
:'25px'
});
markerx.setLabel(label)
markerx.setZIndex(9999)
var opts = {
width
: 300,
height
: 180,
title
: '<h4>坐标信息'+'</h4>',
enableMessage
: true,
message
: ""
}
markerx.addEventListener("mouseover", function(e) {
this.openInfoWindow(new BMap.InfoWindow(iw,opts));
});
markerx.addEventListener("mouseout", function(e) {
this.closeInfoWindow(new BMap.InfoWindow(iw));
});
var that = this;
markerx.addEventListener("click", function(e) {
});
return markerx;
}
}}
</script>
<style >
.title {
color
: darkgreen;
text
-align
: center;
height
: 0.125rem;
}
.nodate {
color
: dimgrey;
text
-align
: center;
}
.reminder {
font
-size
: 0.15rem;
color
: darkcyan;
margin
-left
: 1.25rem;
}
.btn {
width
: 1.125rem;
height
: 0.375rem;
float
: left;
background
-color
: #fff;
color
: rgba(27, 142, 236, 1);
font
-size
: 0.175rem;
border
:0.0125rem solid rgba(27, 142, 236, 1);
border
-radius
: 0.0625rem;
margin
: 0 0.0625rem;
text
-align
: center;
line
-height
: 0.375rem;
}
.btn
:hover {
background
-color
: rgba(27, 142, 236, 0.8);
color
: #fff;
}
.drawing
-panel {
z
-index
: 999;
position
: fixed;
bottom
: 1.3rem;
margin
-left
: 0.3rem;
padding
: 0.12rem 0.12rem;
border
-radius
: .05rem;
background
-color
: #fff;
box
-shadow
: 0 0.025rem 0.075rem 0 rgba(27, 142, 236, 0.5);
}
.BMap_bubble_title {
color
: white;
font
-size
: 0.1625rem;
font
-weight
: bold;
text
-align
: left;
padding
-left
: 0.0625rem;
padding
-top
: 0.0625rem;
border
-bottom
: 0.0125rem solid gray;
background
-color
: #409EFF;
}
.BMap_bubble_content {
background
-color
: rgba(40, 40, 40, 0.8);
padding
-left
: 0.0625rem;
padding
-top
: 0.0625rem;
padding
-bottom
: 0.125rem;
border
-bottom
-left
-radius
: 0.1rem;
border
-bottom
-right
-radius
: 0.1rem;
}
.BMap_pop div
:nth-child(9) {
top
: 0.4375rem !important;
border
-radius
: 0.0625rem;
}
.BMap_pop div
:nth-child(5) {
display
: none;
}
.BMap_pop img {
display
: none;
}
.BMap_top {
display
: none;
}
.BMap_bottom {
display
: none;
}
.BMap_center {
display
: none;
}
.BMap_pop div
:nth-child(1) div {
display
: none;
}
.BMap_pop div
:nth-child(3) {
display
: none;
}
.BMap_pop div
:nth-child(7) {
display
: none;
}
.time
-picker {
margin
-bottom
: 0.2rem;
}
.time
-picker input {
width
: 150px;
padding
: 0.05rem;
margin
-right
: 0.2rem;
font
-size
: 0.15rem;
}
</style> 添加时间筛选组件时间范围，不要input
扫一扫
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
