前言
在地圖接入使用中，很多開發者咨詢我們騰訊位置服務是否支持軌跡回放功能，所以今天特意將我們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://www.uj5u.com/qita/179660.html
標籤：AI
上一篇：小 X 的液體混合