前言：本人自从入web前端坑后，基本都在交通行业摸爬滚打（潜水摸鱼），对地图的应用开发较多些，这首个文章，分享地图相关功能；
废话不多说，先看看效果图。
Pc端 轨迹回放
其实相关地图操作还有很多，但各家Api方法都基本大同小异，接下来分享：如何一步步制作出这个轨迹回放功能
先看看流程：
- 到高德、百度、腾讯地图申请密钥，项目中引入Api，此步骤省略，可自行百度～
- 初始化地图
- 设置经纬度，渲染自定义Marker点
- 模拟或请求轨迹数据
- 使用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