<map
style="width: 100%; height: 100vh;"
id="myMap"
:latitude="latitude"
:include-points="markers"
:longitude="longitude"
:polyline="polyline"
:markers="markers"
></map>
首先使用uniapp的map组件,根据后端给的数据来设置对应属性:
- latitude、longitude中心点的经纬度,
- include-points==>缩放视野以包含所有给定的坐标点,包含起点、终点、和汽车当前对应的点就行了。
- markers => 包含起点、终点、当前位置即可。
- polyline => 指定一系列坐标点,从数组第一项连线至最后一项。所有路径绘出来的线。
// 标记点
markers: [{id:8}, {id:9}, {id:10}], // 起点、当前汽车位置、终点。三条数据,id一定要唯一,这样就可以指定id进行修改移动了。
posi: { // 汽车定位点的数据,后面只用改latitude、longitude即可
latitude: 0,
longitude: 0,
iconPath: "/static/images/car-icon.png",
callout: {
content: "", // 车牌信息
display: "BYCLICK",
fontWeight: "bold",
color: "#5A7BEE", //文本颜色
fontSize: "12px",
bgColor: "#ffffff", //背景色
padding: 5, //文本边缘留白
textAlign: "center",
},
anchor: {
x: 0.5,
y: 0.5,
},
width: 32,
height: 32,
id: 9,
},
// 线数据
// polyline 格式是一个array包含着一个Object。
// points里存放所有路径点的数据,格式为{latitude: 0, longitude: 0}
polyline: [
{
points: [], // 点集合
color: "#3591fc", // 线的颜色
arrowLine: true, //带箭头的线
width: 6,// 线的宽度
},
],
开始轨迹回放
给开始按钮添加点击事件
// 开始播放
// 在data里声明一个全局的timer,用作定时器
// wait为延迟时间
[api地址](https://uniapp.dcloud.io/api/location/map?id=createmapcontext)
start(wait) {
clearInterval(this.timer);
var i = 0;
this.timer = setInterval(() => {
// 创建map对象
var mapContext = uni.createMapContext("myMap", this);
mapContext.translateMarker({
markerId: 9,
destination: {
longitude: this.lineArr[i].lng, // 车辆即将移动到的下一个点的经度
latitude: this.lineArr[i].lat, // 车辆即将移动到的下一个点的纬度
},
duration: 100,
animationEnd: function () {
// 轨迹回放完成
},
fail(e) {
// 轨迹回放失败
},
});
i++;
}, wait);
},
公司禁止访问git,时间太久了,只找到了这个版本的代码,大家可以参考一下,网盘链接:
这段时间太忙了,都没怎么看过论坛,十分抱歉没及时回复大家。
在模拟器上会报错,预览和真机调试没问题
链接:https://pan.baidu.com/s/130H6wox_yGSFsAWDeQfnbw
提取码:0amx