<baidu-map
id="allmap"
:center="center"
:zoom="zoom"
@ready="handler"
style="height:9.45rem;width: 100%;"
:scroll-wheel-zoom="true"
>
<el-date-picker
v-model="startTime"
type="datetime"
placeholder="开始时间"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
class="time-picker"
/>
<el-date-picker
v-model="endTime"
type="datetime"
placeholder="结束时间"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
class="time-picker"
/>
<el-button type="primary" @click="searchConfirm">查询</el-button>
<button class="btn" @click="play(1)">播放</button>
<button class="btn" @click="play(2)">暂停</button>
</baidu-map>
</template>
<script>
export default {
name: 'BtAddrBaiDu',
data() {
return {
startTime: null,
endTime: null,
center: { lng: 114.085947, lat: 22.547 },
zoom: 15,
gpsArr: [
{ lng: 114.000069, lat: 22.500069 },
],
speed: 500,
lushu: null,
batteryId: "",
mapInstance: null,
BMap: null,
bMapLib: null
};
},
mounted() {
// 从父组件获取电池ID
this.batteryId = "电池编号:" + this.$parent.$children[0].hwid;
},
methods: {
searchConfirm() {
if (!this.mapInstance) {
console.error('地图尚未初始化');
return;
}
this.loadData();
},
// 地图初始化回调
handler({ BMap, map }) {
this.BMap = BMap;
this.mapInstance = map;
this.bMapLib = window.BMapLib; // 从全局获取BMapLib
// 初始化地图设置
map.enableScrollWheelZoom(true);
map.centerAndZoom(new BMap.Point(114.085947, 22.547), 15);
// 添加控件
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.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP],
anchor: BMap.ANCHOR_TOP_RIGHT
}));
// 修改LuShu原型(只需一次)
this.bMapLib.LuShu.prototype._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 && !me._map.getBounds().containsPoint(pos)) {
me._map.setCenter(pos);
}
}
me._marker.setPosition(pos);
me._setInfoWin(pos);
}
}, timer);
};
// 初始加载数据
this.loadData();
},
// 数据加载方法
async loadData() {
try {
// 清除旧覆盖物
this.mapInstance.clearOverlays();
const { data } = await 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
})
});
if (data && data.code === 0 && data.data && data.data.length > 0) {
const socitem = data.data;
const arrPois = [];
// 处理最后一个点作为中心点
const lastPoint = socitem[socitem.length - 1];
this.center = { lng: lastPoint.longitude, lat: lastPoint.latitude };
this.mapInstance.panTo(new this.BMap.Point(lastPoint.longitude, lastPoint.latitude));
// 创建图标
const myIcon = new this.BMap.Icon(
require("../../../assets/img/markers.png"),
new this.BMap.Size(23, 25),
{ offset: new this.BMap.Size(10, 25), imageOffset: new this.BMap.Size(0, -275) }
);
// 处理所有点
socitem.forEach((item, i) => {
const point = new this.BMap.Point(item.longitude, item.latitude);
arrPois.push(point);
// 计算距离
const distance = this.getDistance(
lastPoint.latitude, lastPoint.longitude,
item.latitude, item.longitude
);
// 信息窗口内容
const content = `