前言
最近公司有个地图功能开发，根据车辆的行驶的经纬度，来画出车辆的移动轨迹，并模拟车辆在该线路的行驶过程。
效果图大致是这样的。
简易入门
首先进入腾讯位置服务页面然后进行注册账号，注册完成后需要申请AppKey，我们将在自己的应用中配置这个Key来使用SDK中的服务。
webserveapi默认勾选就可以，在未上线之前，我们可以先不填域名白名单。
只需要在html的页面里引入即可
一个完成的例子
创建地图
把上面这段代码保存到html文件中，用浏览器打开，就可以看到一个地图,如下：
实现需求：汽车行驶在地图上
我们要想让车在地图上跑起来，首先要画出一条线。
由点连线
有了地图之后，我们要在地图上划线的话需要用到这个MultiPolyline这个类，折线。折线一般用于运动轨迹显示、路线规划显示 等场景中。
这个类是以图层的方式对折线进行单条或批量绘制，以及删改等操作。你可以在地图上创建，修改，删除。
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)
];
var polylineLayer = new TMap.MultiPolyline({
map, // 绘制到目标地图
// 折线样式定义
geometries: [{
styleId: 'style_blue',
paths: path
}],
});
代码效果图
要画线，必须要先有点，而点在地图上表现为一个经纬度，即这样的new TMap.LatLng(39.98481500648338, 116.30571126937866),有了一组点之后我们，就能对点进行连线，最后形成一个折线。
当然我们也可以对先进行修改，改变线的颜色，宽度，边线宽度， 边线颜色，线端头方式
var polylineLayer = new TMap.MultiPolyline({
map, // 绘制到目标地图
// 折线样式定义
styles: {
'style_blue': new TMap.PolylineStyle({
'color': '#3777FF', //线填充色
'width': 3, //折线宽度
'borderWidth': 1, //边线宽度
'borderColor': '#FFF', //边线颜色
'lineCap': 'round' //线端头方式
})
},
geometries: [{
styleId: 'style_blue',
paths: path
}],
});
物沿线动
有了线之后，也就是行驶轨迹后，我们需要在线的起始端添加一个汽车的标志，然后让这个汽车沿着线走起来，
在腾讯地图里要在地图上添加一个标注，需要使用MultiMarker类，这个类可以让你往地图上的多个标注点，可自定义标注的图标。
该类的相关文档解释
var marker = new TMap.MultiMarker({
map,
styles: {
'car-down': new TMap.MarkerStyle({
'width': 40,
'height': 40,
'anchor': {
x: 20,
y: 20,
},
'faceTo': 'map',
'rotate': 180,
'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
}),
"start": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
}),
"end": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
})
},
geometries: [{
id: 'car',
styleId: 'car-down',
position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
}, {
"id": 'start',
"styleId": 'start',
"position": new TMap.LatLng(39.98481500648338, 116.30571126937866)
}, {
"id": 'end',
"styleId": 'end',
"position": new TMap.LatLng(39.978813710266024, 116.31699800491333)
}]
});
在styles中定义mark的样式，一共有三种，车辆开始时，车辆行进时，车辆结束时。
在geometries中定义样式在那个地方使用。
做完上面一步，车辆已经出现在了轨迹上的起点，但还不会自己走，
如图
在腾讯地图中如果要让一个地图走，需要使用的
MultiMarker的moveAlong方法,具体用法
marker.moveAlong({
'car': {
path,
speed: 250
}
}, {
autoRotation: true
})
path是marker行走的路径，speed是速度，autoRotation表示是否在行进途中自动将旋转
最终效果及源码
完整的源码是这样的
marker轨迹回放-全局模式
最终的效果
写在最后
腾讯位置服务提供了很多示例，如果做个需求没有头绪的话，可以先看看腾讯地图的示例中心。
如果你是高手，想做更多自定义扩展的功能，可以直接查看腾讯提供的API文档，里面包含了所有类的属性，方法。
作者：拿我格子衫来
链接：https://fizzz.blog.csdn.net/article/details/111764120
来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。