前言

在地图接入应用中,很多开发者征询咱们腾讯位置服务是否反对轨迹回放性能,所以明天特意将咱们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"适宜于标注地位应用(右图)

视角追随小车挪动(近期推出,敬请期待)

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