前言
在地图接入使用中，很多开发者咨询我们腾讯位置服务是否支持轨迹回放功能，所以今天特意将我们JavaScript API GL的轨迹回放&小车移动示例放到我们本篇文章分享。
轨迹回放&小车移动
在JavaScript API GL中，使用MultiMarker（点标记）中的moveAlong()方法 ，可以方便的实现轨迹回放功能，而且您可以对样式进行各种想要的修改，比如修改小车图片、不显示路线或者改成您想要的颜色等。
代码
//初始化地图
var map = new TMap.Map("container", {
zoom: 15,
center: new TMap.LatLng(39.984104, 116.307503)
});
//小车移动路线
var path = [
new TMap.LatLng(39.98481500648338, 116.30571126937866),
new TMap.LatLng(39.982266575222155, 116.30596876144409),
new TMap.LatLng(39.982348784165886, 116.3111400604248),
new TMap.LatLng(39.978813710266024, 116.3111400604248),
new TMap.LatLng(39.978813710266024, 116.31699800491333)
];
//创建mareker（小车）
var marker = new TMap.MultiMarker({
map,
styles: { //样式设置
'car-down': new TMap.MarkerStyle({
'width': 40, //小车图片宽度（像素）
'height': 40, //高度
'anchor': { //图片中心的像素位置（小车会保持车头朝前，会以中心位置进行转向）
x: 20,y: 20,
},
'faceTo': 'map', //取’map’让小车贴于地面，faceTo取值说明请见下文图示
'rotate': 180, //初始小车朝向（正北0度，顺时针一周为360度，180为正南）
'src': './img/car.png', //小车图片（图中小车车头向上，即正北0度）
})
},
geometries: [{ //小车marker的位置信息
id: 'car', //因MultiMarker支持包含多个点标记，因此要给小车一个id
styleId: 'car-down', //绑定样式
position: new TMap.LatLng(39.98481500648338, 116.30571126937866),//初始坐标位置
}]
});
//调用moveAlong，实现小车移动
marker.moveAlong({
"car": { //设置让"car"沿"path"移动，速度70公里/小时
path,
speed: 70
}
}, {
autoRotation:true //车头始终向前（沿路线自动旋转）
}
)
在线示例：https://lbs.qq.com/webDemoCenter/glAPI/glMarker/markerMoveAlong
关于MultiMarker的faceTo说明：
JavascriptAPI GL为可倾斜旋转的3D地图，这就带来了图片是贴在地面，还是贴向屏幕的问题：
faceTo: “map” 贴在地面，轨迹回放场景，车是要贴地的（左图）
faceTo:“screen” 贴在屏幕，小车场景就不合适了，它会始终“立着”（中图），"sreen"适合于标注位置使用（右图）
视角跟随小车移动（近期推出，敬请期待）
小车延路线运动的同时，控制视角跟随小车运动，可以达到类似模拟导航、第三人称游戏视角的感觉，非常炫酷。
作者：腾讯位置服务
链接：https://blog.csdn.net/weixin_45628602/article/details/109103634
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
