腾讯位置服务实现轨迹回放
时间:2022-07-27
本文章向大家介绍腾讯位置服务实现轨迹回放,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
在地图接入使用中,很多开发者咨询我们腾讯位置服务是否支持轨迹回放功能,所以今天特意将我们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
"适合于标注位置使用(右图)
视角跟随小车移动(近期推出,敬请期待)
小车延路线运动的同时,控制视角跟随小车运动,可以达到类似模拟导航、第三人称游戏视角的感觉,非常炫酷。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Django中F函数的使用示例代码详解
- 详解pandas获取Dataframe元素值的几种方法
- pandas数据处理之绘图的实现
- Pandas把dataframe或series转换成list的方法
- Django 构建模板form表单的两种方法
- 详解pandas.DataFrame.plot() 画图函数
- python中pandas库中DataFrame对行和列的操作使用方法示例
- PHP实现简易计算器功能
- DataFrame 数据合并实现(merge,join,concat)
- PHP ajax+jQuery 实现批量删除功能实例代码小结
- python对execl 处理操作代码
- Python手动或自动协程操作方法解析
- 什么是python的自省
- python Socket网络编程实现C/S模式和P2P
- keras 多任务多loss实例