Vue地图轨迹回放技术分享，包含：移动端小程序、Pc端

前言：本人自从入web前端坑后，基本都在交通行业摸爬滚打（潜水摸鱼），对地图的应用开发较多些，这首个文章，分享地图相关功能；

废话不多说，先看看效果图。

 移动端 轨迹回放 - 点击查看

 

 

Pc端 轨迹回放

 

其实相关地图操作还有很多，但各家Api方法都基本大同小异，接下来分享：如何一步步制作出这个轨迹回放功能

先看看流程：

1. 到高德、百度、腾讯地图申请密钥，项目中引入Api，此步骤省略，可自行百度～
2. 初始化地图
3. 设置经纬度，渲染自定义Marker点
4. 模拟或请求轨迹数据
5. 使用translateMarker方法，移动Marker点

小程序端代码：

//创建地图盒子
<map id='map' :latitude="latitude" :longitude="longitude" :markers="covers" :style="{ width: '100%', height: mapHeight + 'px' }":scale="13" :polyline="polyline"></map>

// 地图标记点，展示静态车辆Marker点及顶部车牌信息
covers: [{
　　id: 1, 　　width: 42, 　　height: 47, 　　rotate: 270, 　　latitude: 34.259428, 　　longitude: 108.947040, 　　iconPath: 'http://cdn.zhoukaiwen.com/car.png', 　　callout: { 　　　　content: "陕A·88888", // 车牌信息 　　　　display: "ALWAYS", 　　　　fontWeight: "bold", 　　　　color: "#5A7BEE", //文本颜色 　　　　fontSize: "12px", 　　　　bgColor: "#ffffff", //背景色 　　　　padding: 5, //文本边缘留白 　　　　textAlign: "center", 　　}, 　　anchor: { 　　　　x: 0.5, 　　　　y: 0.5, 　　}, }]

// 轨迹坐标点数据
coordinate: [{
    latitude: 34.259428, longitude: 108.947040, problem: false, }, { latitude: 34.252918, longitude: 108.946963, problem: false, }, { latitude: 34.252408, longitude: 108.946240, problem: false, }]

// 生命周期onReady()时，创建map对象
this.map = uni.createMapContext('map');

//轨迹回放方法，执行此方法即可
_this.map.translateMarker({
    markerId: 1, autoRotate:true, destination: { longitude: datai.longitude, // 车辆即将移动到的下一个点的经度 latitude: datai.latitude, // 车辆即将移动到的下一个点的纬度  }, duration: 700, complete: function(){ _this.playIndex++; if(_this.playIndex < len){ _this.start(_this.playIndex, data); }else{ console.log('轨迹已播放'); uni.showToast({ title: '播放完成', duration: 1400, icon: 'none' }); } }, animationEnd: function() { // 轨迹回放完成  }, fail(e) { // 轨迹回放失败  }, }); 

以上就是基于uniapp实现轨迹回放，支持小程序等应用。

 

Pc端需按照不同厂家地图参考Api，基本流程一致。因项目不允许开放代码，大家可以先看看下面链接查看移动端完整项目。

 

开源源码链接：https://gitee.com/kevin_chou/front-end-pu-zi