前言
在地圖接入使用中，很多開發(fā)者咨詢我們騰訊位置服務(wù)是否支持軌跡回放功能也物，所以今天特意將我們JavaScript API GL的軌跡回放&小車移動(dòng)示例放到我們本篇文章分享宫屠。
軌跡回放&小車移動(dòng)
在JavaScript API GL中，使用MultiMarker（點(diǎn)標(biāo)記）中的moveAlong()方法 滑蚯，可以方便的實(shí)現(xiàn)軌跡回放功能浪蹂，而且您可以對(duì)樣式進(jìn)行各種想要的修改，比如修改小車圖片告材、不顯示路線或者改成您想要的顏色等坤次。
代碼
//初始化地圖
var map = new TMap.Map("container", {
zoom: 15,
center: new TMap.LatLng(39.984104, 116.307503)
});
//小車移動(dòng)路線
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)
];
//創(chuàng)建mareker（小車）
var marker = new TMap.MultiMarker({
map,
styles: { //樣式設(shè)置
'car-down': new TMap.MarkerStyle({
'width': 40, //小車圖片寬度（像素）
'height': 40, //高度
'anchor': { //圖片中心的像素位置（小車會(huì)保持車頭朝前，會(huì)以中心位置進(jìn)行轉(zhuǎn)向）
x: 20,y: 20,
},
'faceTo': 'map', //取’map’讓小車貼于地面创葡，faceTo取值說明請(qǐng)見下文圖示
'rotate': 180, //初始小車朝向（正北0度浙踢，順時(shí)針一周為360度，180為正南）
'src': './img/car.png', //小車圖片（圖中小車車頭向上灿渴，即正北0度）
})
},
geometries: [{ //小車marker的位置信息
id: 'car', //因MultiMarker支持包含多個(gè)點(diǎn)標(biāo)記洛波，因此要給小車一個(gè)id
styleId: 'car-down', //綁定樣式
position: new TMap.LatLng(39.98481500648338, 116.30571126937866),//初始坐標(biāo)位置
}]
});
//調(diào)用moveAlong，實(shí)現(xiàn)小車移動(dòng)
marker.moveAlong({
"car": { //設(shè)置讓"car"沿"path"移動(dòng)骚露，速度70公里/小時(shí)
path,
speed: 70
}
}, {
autoRotation:true //車頭始終向前（沿路線自動(dòng)旋轉(zhuǎn)）
}
)
在線示例：https://lbs.qq.com/webDemoCenter/glAPI/glMarker/markerMoveAlong
關(guān)于MultiMarker的faceTo說明：
JavascriptAPI GL為可傾斜旋轉(zhuǎn)的3D地圖蹬挤，這就帶來了圖片是貼在地面，還是貼向屏幕的問題：
faceTo: “map” 貼在地面棘幸，軌跡回放場(chǎng)景焰扳，車是要貼地的（左圖）
faceTo:“screen” 貼在屏幕，小車場(chǎng)景就不合適了误续，它會(huì)始終“立著”（中圖）吨悍，"sreen"適合于標(biāo)注位置使用（右圖）
視角跟隨小車移動(dòng)（近期推出，敬請(qǐng)期待）
小車延路線運(yùn)動(dòng)的同時(shí)蹋嵌，控制視角跟隨小車運(yùn)動(dòng)育瓜，可以達(dá)到類似模擬導(dǎo)航、第三人稱游戲視角的感覺栽烂，非常炫酷躏仇。
作者：騰訊位置服務(wù)
鏈接：https://blog.csdn.net/weixin_45628602/article/details/109103634
來源：CSDN
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)腺办，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處焰手。
