乐趣区

关于腾讯地图:腾讯位置服务实现轨迹回放

jiezi

前言

在地图接入应用中，很多开发者征询咱们腾讯位置服务是否反对轨迹回放性能，所以明天特意将咱们 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/webDemoCen…

对于 MultiMarker 的 faceTo 阐明：

JavascriptAPI GL 为可倾斜旋转的 3D 地图，这就带来了图片是贴在高空，还是贴向屏幕的问题：

faceTo:“map”贴在高空，轨迹回放场景，车是要贴地的（左图）

faceTo:“screen”贴在屏幕，小车场景就不适合了，它会始终“立着”（中图），”sreen“ 适宜于标注地位应用（右图）

视角追随小车挪动（近期推出，敬请期待）

小车延路线静止的同时，管制视角追随小车静止，能够达到相似模仿导航、第三人称游戏视角的感觉，十分炫酷。

退出移动版