微信小程序轨迹回放主要使用到polyline进行划线操作，以及使用marker去进行小车移动操作。效果图如下：
具体实现代码：
trackplay.wxml文件
<!--pages/tracker/tracker.wxml-->
<map id="mymap" longitude="{{mapcenter.longitude}}" latitude="{{mapcenter.latitude}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polylinesettings}}" include-points="polygons" setting="{{mapsettings}}" bindregionchange="updatedmap" max-scale="16">
<cover-view>{{showmessage}}</cover-view>
<cover-view class="trackerimage" bindtap="trackersetting">
<cover-image class="lazy" data-src="{{imagesrc}}"></cover-image>
</cover-view>
<!--cover-view class="trackerquick" bindtap="trackerquickplay">
<cover-image style="line-height:1;" src="{{imagespeedadd}}"></cover-image>
</cover-view>
<cover-view class="trackerslow" bindtap="trackerslowplay">
<cover-image src="{{imagespeedslow}}"></cover-image>
</cover-view-->
<cover-view class="trackerpause" bindtap="trackerpause">
<cover-image src="{{imagepause}}"></cover-image>
</cover-view>
<cover-view class="trackerplay" bindtap="trackerplay">
<cover-image src="{{imageplay}}"></cover-image>
</cover-view>
</map>
trackplay.js文件
const app = getapp();
page({
/**
* 页面的初始数据
*/
data: {
mapctx: null,
scale: 14,
imagesrc: '/images/tracker/tracker-search.png',
imagespeedadd: '/images/tracker/speed-add.png',
imagespeedslow: '/images/tracker/speed-slow.png',
imagepause: '/images/tracker/pause.png',
imageplay: '/images/tracker/play.png',
mapcenter: {
longitude: 113.324520,
latitude: 23.099994
},
markers: [{ //标记点用于在地图上显示标记的位置
iconpath: "/images/tracker/car.png",
id: 1,
width: 25,
height: 40,
longitude: 113.324520,
latitude: 23.099994,
rotate: 0, //旋转角度 默认0
anchor: {
x: .5,
y: .5
}, //经纬度在标注图标的锚点，默认底边中点 {x: .5, y: 1}
callout: { //标记点上方的气泡窗口
content: '轨迹回放',
color: '#fff',
fontsize: 16,
borderradius: 3,
borderwidth: 1,
bordercolor: '#07c160',
bgcolor: '#fff',
padding: 5,
textalign: 'center',
display: 'byclick'
},
}],
polylinesettings: [{ //路线
points: [{latitude: 22.596206, longitude: 113.87317, gpsbearing: 244},{latitude: 22.596216, longitude: 113.873192, gpsbearing: 244},{latitude: 22.596213, longitude: 113.873177, gpsbearing: 244},{latitude: 22.596212, longitude: 113.873205, gpsbearing: 244},{latitude: 22.596155, longitude: 113.873147, gpsbearing: 244},{latitude: 22.59614, longitude: 113.87315, gpsbearing: 244},{latitude: 22.596122, longitude: 113.873146, gpsbearing: 244},{latitude: 22.596098, longitude: 113.873101, gpsbearing: 244},{latitude: 22.596123, longitude: 113.873095, gpsbearing: 244},{latitude: 22.59613, longitude: 113.873047, gpsbearing: 244},{latitude: 22.596154, longitude: 113.873006, gpsbearing: 244},{latitude: 22.596142, longitude: 113.873006, gpsbearing: 244},{latitude: 22.596131, longitude: 113.873009, gpsbearing: 244},{latitude: 22.596117, longitude: 113.873011, gpsbearing: 244},{latitude: 22.596112, longitude: 113.873014, gpsbearing: 244},{latitude: 22.596114, longitude: 113.873021, gpsbearing: 244},{latitude: 22.596122, longitude: 113.873029, gpsbearing: 244},{latitude: 22.596131, longitude: 113.873039, gpsbearing: 244},{latitude: 22.596127, longitude: 113.873046, gpsbearing: 244},{latitude: 22.596116, longitude: 113.873053, gpsbearing: 244},{latitude: 22.596097, longitude: 113.873055, gpsbearing: 244},{latitude: 22.596084, longitude: 113.87306, gpsbearing: 244},{latitude: 22.596074, longitude: 113.873069, gpsbearing: 244},{latitude: 22.596062, longitude: 113.873076, gpsbearing: 244},{latitude: 22.596046, longitude: 113.873075, gpsbearing: 244},{latitude: 22.596028, longitude: 113.873072, gpsbearing: 244},{latitude: 22.595997, longitude: 113.873047, gpsbearing: 244},{latitude: 22.595982, longitude: 113.873054, gpsbearing: 244},{latitude: 22.595967, longitude: 113.873067, gpsbearing: 244},{latitude: 22.595971, longitude: 113.873058, gpsbearing: 244},{latitude: 22.595975, longitude: 113.873046, gpsbearing: 244},{latitude: 22.595984, longitude: 113.873035, gpsbearing: 244},{latitude: 22.595992, longitude: 113.87303, gpsbearing: 244},{latitude: 22.59602, longitude: 113.87305, gpsbearing: 244},{latitude: 22.596017, longitude: 113.873057, gpsbearing: 244},{latitude: 22.596017, longitude: 113.873056, gpsbearing: 244},{latitude: 22.596011, longitude: 113.87305, gpsbearing: 244},{latitude: 22.596008, longitude: 113.873049, gpsbearing: 244},{latitude: 22.596006, longitude: 113.87305, gpsbearing: 244},{latitude: 22.596004, longitude: 113.873053, gpsbearing: 244},{latitude: 22.596004, longitude: 113.873054, gpsbearing: 244},{latitude: 22.595989, longitude: 113.873044, gpsbearing: 244},{latitude: 22.595996, longitude: 113.873051, gpsbearing: 244},{latitude: 22.596023, longitude: 113.873084, gpsbearing: 244},{latitude: 22.596033, longitude: 113.873076, gpsbearing: 244},{latitude: 22.59604, longitude: 113.873076, gpsbearing: 244},{latitude: 22.596041, longitude: 113.873077, gpsbearing: 244},{latitude: 22.596035, longitude: 113.87308, gpsbearing: 244},{latitude: 22.596023, longitude: 113.873069, gpsbearing: 244},{latitude: 22.59602, longitude: 113.873076, gpsbearing: 244},{latitude: 22.596019, longitude: 113.873085, gpsbearing: 244},{latitude: 22.596027, longitude: 113.873101, gpsbearing: 244},{latitude: 22.596018, longitude: 113.873105, gpsbearing: 244},{latitude: 22.596012, longitude: 113.873108, gpsbearing: 244},{latitude: 22.596008, longitude: 113.873111, gpsbearing: 244},{latitude: 22.596009, longitude: 113.873119, gpsbearing: 244},{latitude: 22.59601, longitude: 113.873126, gpsbearing: 244},{latitude: 22.596015, longitude: 113.873135, gpsbearing: 244},{latitude: 22.596017, longitude: 113.873143, gpsbearing: 244},{latitude: 22.596017, longitude: 113.873152, gpsbearing: 244},{latitude: 22.595972, longitude: 113.873132, gpsbearing: 244},{latitude: 22.595979, longitude: 113.873145, gpsbearing: 244},{latitude: 22.595982, longitude: 113.873143, gpsbearing: 244},{latitude: 22.595988, longitude: 113.873132, gpsbearing: 244},{latitude: 22.595988, longitude: 113.873128, gpsbearing: 244},{latitude: 22.59599, longitude: 113.873135, gpsbearing: 244},{latitude: 22.595992, longitude: 113.87314, gpsbearing: 244},{latitude: 22.596003, longitude: 113.873144, gpsbearing: 244},{latitude: 22.596007, longitude: 113.873157, gpsbearing: 244},{latitude: 22.596009, longitude: 113.873165, gpsbearing: 244},{latitude: 22.59602, longitude: 113.873171, gpsbearing: 244},{latitude: 22.596035, longitude: 113.873175, gpsbearing: 244},{latitude: 22.596044, longitude: 113.873179, gpsbearing: 244},{latitude: 22.596049, longitude: 113.873176, gpsbearing: 244},{latitude: 22.59605, longitude: 113.873174, gpsbearing: 244},{latitude: 22.596049, longitude: 113.873177, gpsbearing: 244},{latitude: 22.596048, longitude: 113.87318, gpsbearing: 244},{latitude: 22.596049, longitude: 113.873186, gpsbearing: 244},{latitude: 22.596052, longitude: 113.873188, gpsbearing: 244},{latitude: 22.596053, longitude: 113.873192, gpsbearing: 244},{latitude: 22.596049, longitude: 113.873199, gpsbearing: 244},{latitude: 22.59605, longitude: 113.873199, gpsbearing: 244},{latitude: 22.596054, longitude: 113.873201, gpsbearing: 244},{latitude: 22.596061, longitude: 113.873211, gpsbearing: 244},{latitude: 22.596063, longitude: 113.873215, gpsbearing: 244},{latitude: 22.596064, longitude: 113.87322, gpsbearing: 244},{latitude: 22.59607, longitude: 113.873222, gpsbearing: 244},{latitude: 22.596067, longitude: 113.873219, gpsbearing: 244},{latitude: 22.596063, longitude: 113.873215, gpsbearing: 244},{latitude: 22.59606, longitude: 113.873219, gpsbearing: 244},{latitude: 22.596061, longitude: 113.873213, gpsbearing: 244},{latitude: 22.595382, longitude: 113.873102, gpsbearing: 0},{latitude: 22.595395, longitude: 113.873132, gpsbearing: 0},{latitude: 22.595371, longitude: 113.873124, gpsbearing: 0},{latitude: 22.595353, longitude: 113.873115, gpsbearing: 0},{latitude: 22.595278, longitude: 113.873133, gpsbearing: 0},{latitude: 22.595199, longitude: 113.873142, gpsbearing: 0},{latitude: 22.594997, longitude: 113.87324, gpsbearing: 91},{latitude: 22.595042, longitude: 113.873372, gpsbearing: 157},{latitude: 22.595165, longitude: 113.873482, gpsbearing: 14},{latitude: 22.595167, longitude: 113.873615, gpsbearing: 264},{latitude: 22.595127, longitude: 113.873673, gpsbearing: 229},{latitude: 22.595109, longitude: 113.873692, gpsbearing: 229},{latitude: 22.595107, longitude: 113.873709, gpsbearing: 229},{latitude: 22.595105, longitude: 113.873715, gpsbearing: 229},{latitude: 22.595092, longitude: 113.873767, gpsbearing: 229},{latitude: 22.595017, longitude: 113.873925, gpsbearing: 113},{latitude: 22.594878, longitude: 113.873748, gpsbearing: 242},{latitude: 22.594688, longitude: 113.873477, gpsbearing: 223},{latitude: 22.594547, longitude: 113.873267, gpsbearing: 243},{latitude: 22.594415, longitude: 113.873053, gpsbearing: 228},{latitude: 22.594323, longitude: 113.872878, gpsbearing: 239},{latitude: 22.594276, longitude: 113.872889, gpsbearing: 242},{latitude: 22.594277, longitude: 113.872878, gpsbearing: 242},{latitude: 22.594272, longitude: 113.872867, gpsbearing: 242},{latitude: 22.594252, longitude: 113.872834, gpsbearing: 242},{latitude: 22.594366, longitude: 113.872594, gpsbearing: 321},{latitude: 22.594751, longitude: 113.872271, gpsbearing: 330},{latitude: 22.595176, longitude: 113.871885, gpsbearing: 327},{latitude: 22.595756, longitude: 113.87141, gpsbearing: 326},{latitude: 22.59617, longitude: 113.870976, gpsbearing: 293},{latitude: 22.595982, longitude: 113.870511, gpsbearing: 228},{latitude: 22.595925, longitude: 113.870396, gpsbearing: 231},{latitude: 22.595922, longitude: 113.870391, gpsbearing: 231},{latitude: 22.595921, longitude: 113.870391, gpsbearing: 231},{latitude: 22.595879, longitude: 113.870283, gpsbearing: 251},{latitude: 22.59587, longitude: 113.870271, gpsbearing: 255},{latitude: 22.59585, longitude: 113.870248, gpsbearing: 255},{latitude: 22.595844, longitude: 113.870242, gpsbearing: 255},{latitude: 22.595838, longitude: 113.870234, gpsbearing: 255},{latitude: 22.595833, longitude: 113.870228, gpsbearing: 255},{latitude: 22.595801, longitude: 113.870155, gpsbearing: 255},{latitude: 22.595781, longitude: 113.870103, gpsbearing: 257},{latitude: 22.59577, longitude: 113.870088, gpsbearing: 257},{latitude: 22.595768, longitude: 113.870055, gpsbearing: 257},{latitude: 22.595792, longitude: 113.870001, gpsbearing: 257},{latitude: 22.595883, longitude: 113.869913, gpsbearing: 311},{latitude: 22.596241, longitude: 113.869685, gpsbearing: 340},{latitude: 22.597061, longitude: 113.86915, gpsbearing: 327},{latitude: 22.597764, longitude: 113.868657, gpsbearing: 327},{latitude: 22.598526, longitude: 113.868166, gpsbearing: 330},{latitude: 22.599516, longitude: 113.867496, gpsbearing: 326},{latitude: 22.600336, longitude: 113.866976, gpsbearing: 328},{latitude: 22.601014, longitude: 113.866459, gpsbearing: 325},{latitude: 22.601759, longitude: 113.865882, gpsbearing: 319},{latitude: 22.602108, longitude: 113.865617, gpsbearing: 327},{latitude: 22.602445, longitude: 113.865335, gpsbearing: 322},{latitude: 22.604112, longitude: 113.863745, gpsbearing: 318},{latitude: 22.60445, longitude: 113.863392, gpsbearing: 314},{latitude: 22.604655, longitude: 113.863191, gpsbearing: 317},{latitude: 22.604844, longitude: 113.862974, gpsbearing: 326},{latitude: 22.606299, longitude: 113.861679, gpsbearing: 322},{latitude: 22.60691, longitude: 113.861282, gpsbearing: 332},{latitude: 22.607577, longitude: 113.860947, gpsbearing: 336},{latitude: 22.608198, longitude: 113.860659, gpsbearing: 338},{latitude: 22.608535, longitude: 113.860509, gpsbearing: 344},{latitude: 22.608922, longitude: 113.860322, gpsbearing: 332},{latitude: 22.609435, longitude: 113.860072, gpsbearing: 338},{latitude: 22.61004, longitude: 113.859761, gpsbearing: 334},{latitude: 22.610392, longitude: 113.859548, gpsbearing: 335},{latitude: 22.61047, longitude: 113.859458, gpsbearing: 338},{latitude: 22.610558, longitude: 113.859366, gpsbearing: 338},{latitude: 22.610873, longitude: 113.85919, gpsbearing: 333},{latitude: 22.611081, longitude: 113.859092, gpsbearing: 331},{latitude: 22.611356, longitude: 113.858966, gpsbearing: 340},{latitude: 22.611655, longitude: 113.858828, gpsbearing: 333},{latitude: 22.612054, longitude: 113.858623, gpsbearing: 334},{latitude: 22.612305, longitude: 113.858503, gpsbearing: 335},{latitude: 22.612555, longitude: 113.858369, gpsbearing: 335},{latitude: 22.612731, longitude: 113.858277, gpsbearing: 334},{latitude: 22.613101, longitude: 113.858116, gpsbearing: 343},{latitude: 22.613474, longitude: 113.85796, gpsbearing: 341},{latitude: 22.614135, longitude: 113.857541, gpsbearing: 328},{latitude: 22.615013, longitude: 113.856929, gpsbearing: 326},{latitude: 22.616048, longitude: 113.85613, gpsbearing: 322},{latitude: 22.617079, longitude: 113.855296, gpsbearing: 319},{latitude: 22.61802, longitude: 113.854498, gpsbearing: 321},{latitude: 22.618689, longitude: 113.853904, gpsbearing: 321},{latitude: 22.619046, longitude: 113.85358, gpsbearing: 318},{latitude: 22.619278, longitude: 113.853376, gpsbearing: 316},{latitude: 22.619668, longitude: 113.853046, gpsbearing: 329},{latitude: 22.620248, longitude: 113.852555, gpsbearing: 320},{latitude: 22.62042, longitude: 113.85239, gpsbearing: 321},{latitude: 22.62085, longitude: 113.852022, gpsbearing: 321},{latitude: 22.621188, longitude: 113.851787, gpsbearing: 337},{latitude: 22.62167, longitude: 113.851444, gpsbearing: 326},{latitude: 22.622059, longitude: 113.851191, gpsbearing: 331},{latitude: 22.622527, longitude: 113.850892, gpsbearing: 330},{latitude: 22.622824, longitude: 113.850735, gpsbearing: 340},{latitude: 22.623182, longitude: 113.850531, gpsbearing: 332},{latitude: 22.623666, longitude: 113.850243, gpsbearing: 333},{latitude: 22.624357, longitude: 113.84992, gpsbearing: 337},{latitude: 22.624972, longitude: 113.849677, gpsbearing: 342},{latitude: 22.625648, longitude: 113.849314, gpsbearing: 327},{latitude: 22.626399, longitude: 113.848871, gpsbearing: 332},{latitude: 22.626952, longitude: 113.848533, gpsbearing: 328},{latitude: 22.627567, longitude: 113.848077, gpsbearing: 324},{latitude: 22.628267, longitude: 113.847538, gpsbearing: 325},{latitude: 22.62907, longitude: 113.846803, gpsbearing: 320},{latitude: 22.629844, longitude: 113.846088, gpsbearing: 319},{latitude: 22.630508, longitude: 113.845474, gpsbearing: 320},{latitude: 22.631219, longitude: 113.844839, gpsbearing: 320},{latitude: 22.631904, longitude: 113.844202, gpsbearing: 317},{latitude: 22.6326, longitude: 113.843615, gpsbearing: 323},{latitude: 22.63327, longitude: 113.84305, gpsbearing: 319},{latitude: 22.63395, longitude: 113.84246, gpsbearing: 321},{latitude: 22.634749, longitude: 113.841687, gpsbearing: 314},{latitude: 22.635693, longitude: 113.840785, gpsbearing: 318},{latitude: 22.636531, longitude: 113.839701, gpsbearing: 302},{latitude: 22.637421, longitude: 113.838755, gpsbearing: 320},{latitude: 22.638429, longitude: 113.837917, gpsbearing: 318},{latitude: 22.639228, longitude: 113.837153, gpsbearing: 318},{latitude: 22.639727, longitude: 113.836756, gpsbearing: 325},{latitude: 22.640429, longitude: 113.836294, gpsbearing: 330},{latitude: 22.640876, longitude: 113.836018, gpsbearing: 332},{latitude: 22.641161, longitude: 113.835815, gpsbearing: 324},{latitude: 22.641617, longitude: 113.835526, gpsbearing: 334},{latitude: 22.642177, longitude: 113.835227, gpsbearing: 331},{latitude: 22.642515, longitude: 113.834992, gpsbearing: 320},{latitude: 22.643021, longitude: 113.834658, gpsbearing: 329},{latitude: 22.643557, longitude: 113.834292, gpsbearing: 328},{latitude: 22.644073, longitude: 113.833943, gpsbearing: 327},{latitude: 22.644542, longitude: 113.833564, gpsbearing: 319},{latitude: 22.645273, longitude: 113.832871, gpsbearing: 319},{latitude: 22.64629, longitude: 113.832075, gpsbearing: 321},{latitude: 22.647176, longitude: 113.831203, gpsbearing: 315},{latitude: 22.648153, longitude: 113.830214, gpsbearing: 316},{latitude: 22.64912, longitude: 113.829231, gpsbearing: 316},{latitude: 22.649892, longitude: 113.828469, gpsbearing: 319},{latitude: 22.650929, longitude: 113.827758, gpsbearing: 334},{latitude: 22.652273, longitude: 113.82722, gpsbearing: 346},{latitude: 22.653721, longitude: 113.827043, gpsbearing: 0},{latitude: 22.65517, longitude: 113.827253, gpsbearing: 14},{latitude: 22.656599, longitude: 113.827553, gpsbearing: 11},{latitude: 22.658001, longitude: 113.827843, gpsbearing: 10},{latitude: 22.659265, longitude: 113.828104, gpsbearing: 10},{latitude: 22.660267, longitude: 113.828311, gpsbearing: 11},{latitude: 22.661353, longitude: 113.828523, gpsbearing: 10},{latitude: 22.662587, longitude: 113.828707, gpsbearing: 5},{latitude: 22.663792, longitude: 113.828852, gpsbearing: 9},{latitude: 22.664849, longitude: 113.828935, gpsbearing: 358},{latitude: 22.666112, longitude: 113.828927, gpsbearing: 0},{latitude: 22.66696, longitude: 113.828904, gpsbearing: 0},{latitude: 22.6682, longitude: 113.828904, gpsbearing: 1},{latitude: 22.669147, longitude: 113.828892, gpsbearing: 357},{latitude: 22.670029, longitude: 113.82891, gpsbearing: 1},{latitude: 22.670366, longitude: 113.829053, gpsbearing: 74},{latitude: 22.670421, longitude: 113.829364, gpsbearing: 90},{latitude: 22.670444, longitude: 113.829855, gpsbearing: 93},{latitude: 22.670461, longitude: 113.830243, gpsbearing: 77},{latitude: 22.670541, longitude: 113.830399, gpsbearing: 21},{latitude: 22.670909, longitude: 113.83034, gpsbearing: 349},{latitude: 22.671146, longitude: 113.830415, gpsbearing: 38},{latitude: 22.671149, longitude: 113.830554, gpsbearing: 143},{latitude: 22.671147, longitude: 113.830591, gpsbearing: 103},{latitude: 22.671211, longitude: 113.830701, gpsbearing: 59},{latitude: 22.671229, longitude: 113.830758, gpsbearing: 54},{latitude: 22.671152, longitude: 113.830826, gpsbearing: 141},{latitude: 22.671181, longitude: 113.830789, gpsbearing: 148},{latitude: 22.671081, longitude: 113.830807, gpsbearing: 173},{latitude: 22.671056, longitude: 113.830823, gpsbearing: 176},{latitude: 22.671067, longitude: 113.830761, gpsbearing: 197},{latitude: 22.671138, longitude: 113.830843, gpsbearing: 199},{latitude: 22.67108, longitude: 113.830825, gpsbearing: 204},{latitude: 22.671102, longitude: 113.830873, gpsbearing: 210},{latitude: 22.671024, longitude: 113.830966, gpsbearing: 200},{latitude: 22.670681, longitude: 113.830952, gpsbearing: 146},{latitude: 22.670178, longitude: 113.830837, gpsbearing: 182},{latitude: 22.671683, longitude: 113.830848, gpsbearing: 63},{latitude: 22.671662, longitude: 113.830848, gpsbearing: 63},{latitude: 22.671662, longitude: 113.830841, gpsbearing: 55},{latitude: 22.671555, longitude: 113.83088, gpsbearing: 20},{latitude: 22.671481, longitude: 113.830897, gpsbearing: 11},{latitude: 22.671486, longitude: 113.830877, gpsbearing: 11},{latitude: 22.671422, longitude: 113.830844, gpsbearing: 11},{latitude: 22.6714, longitude: 113.830852, gpsbearing: 11},{latitude: 22.671388, longitude: 113.830872, gpsbearing: 11},{latitude: 22.671458, longitude: 113.830874, gpsbearing: 11},{latitude: 22.671463, longitude: 113.830894, gpsbearing: 11},{latitude: 22.671475, longitude: 113.830892, gpsbearing: 11},{latitude: 22.671493, longitude: 113.830812, gpsbearing: 11},{latitude: 22.67146, longitude: 113.830784, gpsbearing: 11},{latitude: 22.671443, longitude: 113.830807, gpsbearing: 11},{latitude: 22.671389, longitude: 113.830789, gpsbearing: 11},{latitude: 22.671289, longitude: 113.830735, gpsbearing: 11},{latitude: 22.671227, longitude: 113.830663, gpsbearing: 11},{latitude: 22.671224, longitude: 113.830673, gpsbearing: 11},{latitude: 22.671251, longitude: 113.830766, gpsbearing: 11},{latitude: 22.671234, longitude: 113.830775, gpsbearing: 11},{latitude: 22.67121, longitude: 113.830679, gpsbearing: 11},{latitude: 22.67117, longitude: 113.83051, gpsbearing: 11},{latitude: 22.671142, longitude: 113.830573, gpsbearing: 11},{latitude: 22.670879, longitude: 113.830429, gpsbearing: 348},{latitude: 22.670907, longitude: 113.830445, gpsbearing: 260},{latitude: 22.670978, longitude: 113.830479, gpsbearing: 224},{latitude: 22.671004, longitude: 113.830568, gpsbearing: 224},{latitude: 22.670994, longitude: 113.830727, gpsbearing: 153},{latitude: 22.670997, longitude: 113.830757, gpsbearing: 161},{latitude: 22.671047, longitude: 113.830795, gpsbearing: 166},{latitude: 22.671073, longitude: 113.830817, gpsbearing: 169},{latitude: 22.671085, longitude: 113.830824, gpsbearing: 169},{latitude: 22.671058, longitude: 113.830814, gpsbearing: 169},{latitude: 22.671086, longitude: 113.830899, gpsbearing: 169},{latitude: 22.671089, longitude: 113.830965, gpsbearing: 169},{latitude: 22.671117, longitude: 113.830947, gpsbearing: 169},{latitude: 22.671631, longitude: 113.831154, gpsbearing: 158},{latitude: 22.6716, longitude: 113.831148, gpsbearing: 145},{latitude: 22.67152, longitude: 113.831287, gpsbearing: 145},{latitude: 22.671486, longitude: 113.831509, gpsbearing: 77},{latitude: 22.67135, longitude: 113.831558, gpsbearing: 96},{latitude: 22.671349, longitude: 113.831529, gpsbearing: 102},{latitude: 22.671346, longitude: 113.831489, gpsbearing: 95},{latitude: 22.671388, longitude: 113.831372, gpsbearing: 95},{latitude: 22.671386, longitude: 113.831333, gpsbearing: 95},{latitude: 22.671407, longitude: 113.831286, gpsbearing: 95},{latitude: 22.671292, longitude: 113.831228, gpsbearing: 95},{latitude: 22.671025, longitude: 113.831196, gpsbearing: 149},{latitude: 22.671026, longitude: 113.831183, gpsbearing: 180},{latitude: 22.671076, longitude: 113.83113, gpsbearing: 180},{latitude: 22.671119, longitude: 113.831024, gpsbearing: 180},{latitude: 22.67117, longitude: 113.830974, gpsbearing: 180},{latitude: 22.67112, longitude: 113.830935, gpsbearing: 180},{latitude: 22.671233, longitude: 113.830912, gpsbearing: 180},{latitude: 22.671269, longitude: 113.830879, gpsbearing: 180},{latitude: 22.671215, longitude: 113.830906, gpsbearing: 180},{latitude: 22.6712, longitude: 113.830907, gpsbearing: 180},{latitude: 22.671278, longitude: 113.830979, gpsbearing: 180},{latitude: 22.671498, longitude: 113.831101, gpsbearing: 180},{latitude: 22.671705, longitude: 113.831304, gpsbearing: 43},{latitude: 22.671713, longitude: 113.831276, gpsbearing: 297},{latitude: 22.67165, longitude: 113.831221, gpsbearing: 298},{latitude: 22.671617, longitude: 113.83117, gpsbearing: 312},{latitude: 22.671463, longitude: 113.831156, gpsbearing: 326},{latitude: 22.671413, longitude: 113.831106, gpsbearing: 339},{latitude: 22.671225, longitude: 113.831049, gpsbearing: 353},{latitude: 22.670929, longitude: 113.830936, gpsbearing: 99},{latitude: 22.670841, longitude: 113.83088, gpsbearing: 225},{latitude: 22.671066, longitude: 113.830904, gpsbearing: 231},{latitude: 22.671164, longitude: 113.830972, gpsbearing: 20},{latitude: 22.671189, longitude: 113.83107, gpsbearing: 22},{latitude: 22.671145, longitude: 113.831111, gpsbearing: 29},{latitude: 22.671133, longitude: 113.830951, gpsbearing: 34},{latitude: 22.671185, longitude: 113.830818, gpsbearing: 29},{latitude: 22.671209, longitude: 113.830802, gpsbearing: 348},{latitude: 22.671145, longitude: 113.830834, gpsbearing: 348},{latitude: 22.67109, longitude: 113.830825, gpsbearing: 348},{latitude: 22.671034, longitude: 113.830765, gpsbearing: 348},{latitude: 22.671065, longitude: 113.830838, gpsbearing: 348},{latitude: 22.671175, longitude: 113.830935, gpsbearing: 348},{latitude: 22.671178, longitude: 113.830935, gpsbearing: 348},{latitude: 22.671248, longitude: 113.830893, gpsbearing: 348},{latitude: 22.671134, longitude: 113.83089, gpsbearing: 348},{latitude: 22.671147, longitude: 113.830964, gpsbearing: 348},{latitude: 22.671283, longitude: 113.831064, gpsbearing: 348},{latitude: 22.671341, longitude: 113.831058, gpsbearing: 348}],
color: "#7b7af8",
width: 5,
//borderwidth: 2,
bordercolor: '#7b7af8',
level: 'abovebuildings', //压盖关系
arrowline: true //带箭头的线
}],
polygons: [],
mapsettings: { //统一设置地图配置
skew: 0, //倾斜角度
rotate: 0, //旋转角度
showscale: false, //显示比例尺，工具暂不支持
subkey: '', //个性化地图使用的key
layerstyle: 1, //个性化地图配置的 style
enablezoom: true, //缩放
enablescroll: true, //拖动
enablerotate: false, //旋转
showcompass: false, //指南针
enable3d: false, //展示3d楼块(工具暂不支持）
enableoverlooking: false, //俯视
enablesatellite: false, //卫星图
enabletraffic: false, //实时路况
},
playindex: 0,
showmessage: "",
step: 1,
duration: 100,
maxduration: 2000,
minduration: 500,
ispause: false
},
trackplay: function () { //轨迹接口
const that = this;
const points = this.data.polylinesettings[0].points;
that.setdata({
'markers[0].latitude': points[0].latitude,
'markers[0].longitude': points[0].longitude,
mapcenter: points[0],
}, function () {
that.mapctx.translatemarker({
markerid: 1,
autorotate: true,
movewithrotate: true,
duration: 1000,
destination: points[0]
})
that.begintrack() //轨迹回放
})
},
begintrack: function () { //轨迹回放
const that = this;
let index = that.data.playindex === 0 ? 0 : that.data.playindex;
let points = this.data.polylinesettings[0].points;
let duration = that.data.duration;
//this.play();
that.data.tracktimer = setinterval(function () {
const point = points[index];
that.data.lastpoint = point;
//console.log("最后点:",that.data.lastpoint);
// console.log(point,that.getcurrenttime());
that.mapctx.translatemarker({
markerid: 1,
autorotate: false,
movewithrotate: true,
duration: duration,
destination: point,
rotate: point.gpsbearing,
fail: function (res) {
console.log(res);
},
success: function () {
that.setdata({
playindex: index,
showmessage: point.latitude + "," + point.longitude + "," + point.gpsbearing + "," + points.length + "," + index
})
that.mapctx.getregion({
success: function (e) {
if (that.checkoutregion(point, e.southwest, e.northeast)) {
that.setdata({
mapcenter: point,
})
}
}
});
if (index + 1 >= points.length) {
that.stoptrack()
}
index++;
}
})
}, duration);
},
stoptrack: function () { //结束回放
const that = this;
let points = this.data.polylinesettings[0].points;
that.setdata({
playindex: 0,
'markers[0].latitude': points[0].latitude,
'markers[0].longitude': points[0].longitude,
});
clearinterval(that.data.tracktimer);
},
checkoutregion: function (point, southwest, northeast) {
// console.log(point,southwest,northeast);
if (point.longitude < southwest.longitude || point.latitude < southwest.latitude) {
return true;
}
if (point.longitude > northeast.longitude || point.latitude > northeast.latitude) {
return true;
}
return false;
},
trackerpause: function () {
if (!this.data.ispause) {
clearinterval(this.data.tracktimer);
this.setdata({
ispause: true
});
}
},
trackerplay: function () {
if (this.data.ispause) {
this.begintrack();
this.setdata({
ispause: false
});
}
},
/**
* 生命周期函数--监听页面加载
*/
onload: function (options) {
this.mapctx = wx.createmapcontext('mymap');
this.trackplay();
},
})
这里如果每次移动一个点，就切换一下地图中心点，去跟随车辆位置的话，地图会有抖动的感觉。所以我们做了一个可视化区域的判断，当车出了可视化区域的时候再进行地图中心点的切换。
这里还使用了translatemarker的函数来进行小车偏向角的切换，让小车可以平滑切换。要注意小车图片默认的朝上是向上，相当于正北方向。
目前是实现了轨迹回放功能的，后续我们将继续添加快进和快退的功能。
实现过程中遇到几个小程序bug，暂时无法解决，先记录下来，等微信更新：
1.画轨迹线中borderwidth设置，导致轨迹真机无法显示。
2.地图层级切换导致的轨迹不可见。具体可以参照：
以上两个问题都没找到解决办法，有解决办法的可以给我发消息告诉我
到此这篇关于详解微信小程序轨迹回放实现及遇到的坑的文章就介绍到这了,更多相关小程序轨迹回放内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！