一：百度地图车辆轨迹显示，如下图：
1.直接上代码：其中that.lineData数据为经纬度总数据，如下：
[{lat: 40.03147874124063,lng: 116.35885991213647,currentDate:"车辆速度：" +"35" +"km/h" + "<br/>" + "车辆时间：" +"2020-11-24 00:00:58"},{lat: 40.03387244386362,lng: 116.35671079507857,currentDate:"车辆速度：" +"35" +"km/h" + "<br/>" + "车辆时间：" +"2020-11-24 00:00:58"},,,,,,,,]
渲染层代码：
<div id="map_canvas"></div>
逻辑代码如下：
initMapHt(BMap, map) {
var that = this;
var map = new BMap.Map("map_canvas");
map.enableScrollWheelZoom();
var arrPois = [];
arrPois = that.lineData.map(val => {
var item = new BMap.Point(val.lng, val.lat);
return item;
});
map.centerAndZoom(new BMap.Point(arrPois[0].lng, arrPois[0].lat), 13); // 根据经纬度显示地图的范围
var lushu = "";
// 实例化一个驾车导航用来生成路线
var drv = new BMap.DrivingRoute("北京", {
renderOptions: {
//结果呈现设置
map: map,
autoViewport: false, //检索结束后自动调整地图视野
enableDragging: false //起终点可进行拖拽
},
onSearchComplete: function(res) {
if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
map.addOverlay(
new BMap.Polyline(arrPois, {
strokeColor: "#002C95",
strokeWeight: 4
})
);
map.setViewport(arrPois); // 根据提供的地理区域或坐标设置地图视野
var aa = 2;
lushu = new BMapLib.LuShu(map, arrPois, {
defaultContent: "", //"从天安门到百度大厦"
autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
icon: new BMap.Icon(gisRed, new BMap.Size(52, 26), {
anchor: new BMap.Size(27, 13)
}),
speed: 9000,
enableRotation: true, //是否设置marker随着道路的走向进行旋转
landmarkPois: []
});
}
}
});
//引用添加小圆点代码
this.initPoint(map);
var start = new BMap.Point(arrPois[0].lng, arrPois[0].lat);
var end = new BMap.Point(
arrPois.slice(-1)[0].lng,
arrPois.slice(-1)[0].lat
);
drv.search(start, end);
//绑定事件
$("run").onclick = function() {
lushu.start();
};
$("runjx").onclick = function() {
lushu.start();
};
$("stop").onclick = function() {
lushu.stop();
};
$("pause").onclick = function() {
lushu.pause();
};
function $(element) {
return document.getElementById(element);
}
}
添加小圆点代码如下，点击小圆点弹出内容，如下图
initPoint(map) {
// that.lineData
var that = this;
var icon = new BMap.Icon(btnIcon, new BMap.Size(10, 10), {
anchor: new BMap.Size(5, 5)
});
icon.setImageSize(new BMap.Size(10, 10)); //设置图标大小
var lineDatanumber = [];
for (let i = 0; i < that.lineData.length; i++) {
if (that.lineData.length > 3000) {
if (i % 9 == 0) {
lineDatanumber.push(that.lineData[i]);
}
} else if (that.lineData.length > 1000) {
if (i % 5 == 0) {
lineDatanumber.push(that.lineData[i]);
}
} else {
if (i % 2 == 0) {
lineDatanumber.push(that.lineData[i]);
}
}
}
lineDatanumber.forEach(val => {
var point = new BMap.Point(val.lng, val.lat);
var marker = new BMap.Marker(point, { icon: icon });
marker.addEventListener("click", function() {
var opts = {
width: 260,
height: 30,
title: " "
};
var infoWindow = new BMap.InfoWindow(val.currentDate, opts);
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
map.addOverlay(marker);
});
},
