<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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐