前言

在地圖接入使用中，很多開發(fā)者咨詢我們騰訊位置服務(wù)是否支持軌跡回放功能，所以今天特意將我們JavaScript API GL的軌跡回放&小車移動(dòng)示例放到我們本篇文章分享。

軌跡回放&小車移動(dòng)

在JavaScript API GL中，使用MultiMarker（點(diǎn)標(biāo)記）中的moveAlong()方法 ，可以方便的實(shí)現(xiàn)軌跡回放功能，而且您可以對樣式進(jìn)行各種想要的修改，比如修改小車圖片、不顯示路線或者改成您想要的顏色等。

image

代碼

//初始化地圖
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取值說明請見下文圖示
      '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” 貼在地面，軌跡回放場景，車是要貼地的（左圖）

faceTo:“screen” 貼在屏幕，小車場景就不合適了，它會(huì)始終“立著”（中圖），"sreen"適合于標(biāo)注位置使用（右圖）

image

視角跟隨小車移動(dòng)（近期推出，敬請期待）

小車延路線運(yùn)動(dòng)的同時(shí)，控制視角跟隨小車運(yùn)動(dòng)，可以達(dá)到類似模擬導(dǎo)航、第三人稱游戲視角的感覺，非常炫酷。

image

作者：騰訊位置服務(wù)

鏈接：https://juejin.im/post/6884064285769596942

來源：掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。