前几天接到一个腾讯地图轨迹回放功能需求，网上百度了一下没什么例子，只好自己研究一下
先说一下原理，利用points描点做轨迹，接着利用起始锚点进行移动，这里起始锚点设置图标，其他的用透明图标，使用移动方法translateMarker进行移动，通过经纬度计算两点距离，以此设置移动速度，达到匀速移动
总体上没什么技术含量，主要找轨迹点经纬度比较麻烦费时间
下面放代码：
js:
// 全屏地图路线图并动画移动
// polyline中的points可以获取json用来绘制轨迹图
// 获取应用实例
const app = getApp()
Page({
data: {
markers: [], // 标记点集合
polyline: [], // 坐标点集合
satellite: false, // 是否开启卫星图
i: 0, // 用于循环，
points:[]
},
onReady: function () {
},
onLoad: function () {
this.setData({
latitude: 29.532256,
longitude: 106.556888
})
let that = this;
this.mapCtx = wx.createMapContext('map'); // 创建 map 上下文 MapContext 对象
that.translateMarker();
},
startmove:function()
{
this.setData(
{
i:0
}
);
this.translateMarker();
},
genMarkds:function(indx)
{
var reslatitude = 29.544256;
var reslongitude = 106.586888;
let points = [
// {longitude: 106.587188, latitude: 29.544382, iconPath: "/images/mapmarkes.png"},
{ longitude: 106.587891, latitude: 29.544862, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.588293, latitude: 29.54517, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.588857, latitude: 29.545754, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.589189, latitude: 29.546221, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.589543, latitude: 29.546879, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.590214, latitude: 29.548311, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.590562, latitude: 29.548913, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.591603, latitude: 29.550939, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.59222, latitude: 29.552213, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.593073, latitude: 29.554056, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.593921, latitude: 29.55581, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.594269, latitude: 29.556781, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.594591, latitude: 29.558498, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.594645, latitude: 29.560355, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.594634, latitude: 29.563267, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.594044, latitude: 29.567429, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.593776, latitude: 29.569137, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.593229, latitude: 29.570424, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.592896, latitude: 29.571003, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.591877, latitude: 29.572011, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.590739, latitude: 29.573121, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.588883, latitude: 29.574931, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.587939, latitude: 29.576536, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.587392, latitude: 29.576872, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.585675, latitude: 29.577703, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.584967, latitude: 29.578151, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.584592, latitude: 29.578701, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.584206, latitude: 29.579475, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.584388, latitude: 29.58317, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.584431, latitude: 29.584393, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.584399, latitude: 29.58568, iconPath: "/images/mapmarkes.png" },
//掉头
{ longitude: 106.584098, latitude: 29.585652, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.58412, latitude: 29.583441, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.584088, latitude: 29.58317, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.583906, latitude: 29.579475, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.583992, latitude: 29.578701, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.584367, latitude: 29.578151, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.585375, latitude: 29.577703, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.587092, latitude: 29.576872, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.587639, latitude: 29.576536, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.588583, latitude: 29.574931, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.590439, latitude: 29.573121, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.591577, latitude: 29.572011, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.592596, latitude: 29.571003, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.592929, latitude: 29.570424, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.593476, latitude: 29.569137, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.593744, latitude: 29.567429, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.594334, latitude: 29.563267, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.594345, latitude: 29.560355, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.594291, latitude: 29.558498, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.593969, latitude: 29.556781, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.593621, latitude: 29.55581, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.592773, latitude: 29.554056, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.591923, latitude: 29.552213, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.591303, latitude: 29.550939, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.590262, latitude: 29.548913, iconPath: "/images/mapmarkes.png" },
//{ longitude: 106.589914, latitude: 29.548311, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.589243, latitude: 29.546879, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.588889, latitude: 29.546221, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.588557, latitude: 29.545754, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.587993, latitude: 29.54517, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.587591, latitude: 29.544862, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.585675, latitude: 29.543994, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.577436, latitude: 29.54195, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.573809, latitude: 29.541484, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.56852, latitude: 29.540447, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.567286, latitude: 29.54041, iconPath: "/images/mapmarkes.png" },
// { longitude: 106.563917, latitude: 29.540858, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.558274, latitude: 29.540055, iconPath: "/images/mapmarkes.png" },
//{ longitude: 106.554562, latitude: 29.53859, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.551633, latitude: 29.538151, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.544734, latitude: 29.53859, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.542835, latitude: 29.538217, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.541269, latitude: 29.53733, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.537642, latitude: 29.533643, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.536162, latitude: 29.530618, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.534896, latitude: 29.526361, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.534864, latitude: 29.525344, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.535797, latitude: 29.522123, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.536613, latitude: 29.51977, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.53776, latitude: 29.518426, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.539584, latitude: 29.516839, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.540453, latitude: 29.514355, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.544423, latitude: 29.50964, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.550324, latitude: 29.5057, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.551944, latitude: 29.504645, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.5538, latitude: 29.50401, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.553907, latitude: 29.499472, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.556354, latitude: 29.487089, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.555667, latitude: 29.485053, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.553285, latitude: 29.476311, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.550131, latitude: 29.473864, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.540174, latitude: 29.468932, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.536183, latitude: 29.469941, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.531312, latitude: 29.469212, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.526527, latitude: 29.471043, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.524317, latitude: 29.47207, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.524253, latitude: 29.471939, iconPath: "/images/mapmarkes.png" },
//
{ longitude: 106.524253, latitude: 29.471539, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.524317, latitude: 29.47167, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.526527, latitude: 29.470643, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.531312, latitude: 29.468812, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.536183, latitude: 29.469541, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.540131, latitude: 29.468564, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.550131, latitude: 29.473464, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.553685, latitude: 29.475911, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.556067, latitude: 29.484653, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.556754, latitude: 29.486689, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.554207, latitude: 29.499072, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.5541, latitude: 29.50411, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.552244, latitude: 29.504845, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.550624, latitude: 29.5059, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.544723, latitude: 29.50984, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.540753, latitude: 29.514555, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.539884, latitude: 29.517039, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.53806, latitude: 29.518486, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.536913, latitude: 29.51997, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.536097, latitude: 29.521723, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.535164, latitude: 29.524944, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.535196, latitude: 29.525961, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.536462, latitude: 29.530618, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.538042, latitude: 29.533343, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.541569, latitude: 29.53703, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.542835, latitude: 29.537917, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.544734, latitude: 29.53829, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.551633, latitude: 29.537751, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.558274, latitude: 29.539755, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.567286, latitude: 29.53941, iconPath: "/images/mapmarkes.png" },
{ longitude: 106.573809, latitude: 29.541084, iconPath: "/images/mapmarkes.png" },
];
let markers = points;
markers.map((value, index) => {
markers[index].id = index + 1;
if(index == indx)
{
markers[index].iconPath ="/images/point.png";
markers[index].width = 13;
markers[index].height=13;
markers[index].anchor ={x:0.5,y:0.5};
}
});
if (indx==0)
{
this.setData({
polyline: [{
points: points,
color: "#FF0000DD",
width: 5,
arrowLine:true
}],
points: points
})
this.setData({
markers: markers
})
}
return markers;
},
// 平移marker，带动画
translateMarker: function () {
let that = this;
let markers = this.genMarkds(that.data.i);
let markerId = markers[that.data.i].id;
let destination = {
longitude: markers[that.data.i + 1].longitude,
latitude: markers[that.data.i + 1].latitude
};
let getDistance = that.getDistance(markers[that.data.i].latitude, markers[that.data.i].longitude, markers[that.data.i + 1].latitude, markers[that.data.i + 1].longitude);
let duration = getDistance *0.1; // 根据距离计算平移的速度，看起来保持匀速
this.mapCtx.translateMarker({
markerId: 1,
destination: destination,
autoRotate: false,
rotate: 0,
duration: duration,
success(res) {
that.setData({
i: that.data.i + 1
});
// 小于长度减1才执行
if (that.data.i < markers.length - 1) {
that.translateMarker();
}
var passedpoint = [];
for (var pointsindex = 0; pointsindex < that.data.i; pointsindex++)
{
passedpoint.push(that.data.points[pointsindex]);
}
that.data.polyline.push({
points: passedpoint,
color: "#eeeeee",
width: 5,
arrowLine: true
});
},
fail(err) {
console.log('fail', err)
}
})
},
// 计算两坐标点之间的距离
getDistance: function (lat1, lng1, lat2, lng2) {
let rad1 = lat1 * Math.PI / 180.0;
let rad2 = lat2 * Math.PI / 180.0;
let a = rad1 - rad2;
let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
let r = 6378137;
return (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))).toFixed(0)
}
})
wxml: