騰訊地圖實現軌跡回放demo

前言

在地圖接入使用中，不少開發者諮詢咱們騰訊位置服務是否支持軌跡回放功能，因此今天特地將咱們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

來源：CSDN

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。