腾讯地图教你快速实现轨迹回放

前言

在地图接入使用中，很多开发者咨询我们腾讯位置服务是否支持轨迹回放功能，所以今天特意将我们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支持包含多个点标记，因此要给小车一个idstyleId: '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://juejin.im/post/6884064285769596942

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

腾讯地图教你快速实现轨迹回放相关推荐

python实现轨迹回放_腾讯地图教你快速实现轨迹回放
前言在地图接入使用中,很多开发者咨询我们腾讯位置服务是否支持轨迹回放功能,所以今天特意将我们JavaScript API GL的轨迹回放&小车移动示例放到我们本篇文章分享. 轨迹回放& ...
百度地图API（二）轨迹回放
回到项目需求上来:做一个设备轨迹回放功能 demo数据分析: 因为我只是做一个demo,所以设计到时间.设备查询就不做了,直接做一组假坐标数据 // 初始化 var map = new BMap.Ma ...
高德地图：实现3D模型轨迹回放效果（类似百度地图汽车模型路书）
需求描述需使用高德地图实现类似百度地图汽车模型路书的效果,即: ①在地图上添加一个沿着路径移动,且角度与路径一致的3D模型: ②3D模型移动过的路径用不同颜色显示出来: 在高德地图在线示例中实现的效 ...
web技术分享| 【高德地图】实现自定义的轨迹回放
实现(轨迹回放)方式有两种: 第一种是使用 JS API 和 AMap.PolyLine(折线)等图形配合实现. 第二种是使用 JS API 和 AMapUI 组件库配合使用,利用 PathSimp ...
js室内地图开发_如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回放 ...
地图显示动态轨迹_腾讯地图SDK全新版本上线，可满足开发者核心诉求
近日,由腾讯位置服务开发的SDK全新v4.3.0版本正式上线,新增了小车平滑移动.点聚合功能,内置墨渊模板适配暗色模式,动态路名等,可以帮助开发者更轻松地访问腾讯地图服务和数据,优化地图类的程序开发体 ...
qq位置如何用启动百度地图定位服务器,腾讯位置服务API快速入门
前言之前项目有个需求,在网页上显示微信发送过来的位置信息,该开始想用百度地图,后来发现腾讯地图相对简单一点快速入门申请Key 引入js 把###替换成你申请的key 定义容器设置好宽高度设置 ...
手把手教你快速构建一份全国疫情分布地图
本文基于百度地图API和fangkai提供的疫情数据API制作,是一份真实并实时的疫情场所分布地图,演示地址:https://rovertang.com/map/ncov/ 花絮上次发表了如何制作一 ...
腾讯地图GL（轨迹回放）
腾讯地图轨迹回放的实现效果图首先了解一下需要使用到的API API 定义 MultiMarker(必选) 用于实现在地图中的点标注功能,可以根据用户设置的样式同时标注多个位置 InfoWindow ...

腾讯地图教你快速实现轨迹回放

前言

轨迹回放&小车移动

代码

关于MultiMarker的faceTo说明：

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

腾讯地图教你快速实现轨迹回放相关推荐

最新文章

热门文章