共计 2878 个字符，预计需要花费 8 分钟才能阅读完成。
产品需要：
依据可能回放进去车辆的运行轨迹路线、运行方向和速度。
需要剖析：
1、首先因为是 Web 网页端的性能，所以须要用到的是地图模块的 API，能够抉择百度地图或者腾讯地图。
2、因为须要地位信息，所以地图须要反对点到点的路线绘制性能。
3、关键点：须要一个小车，并且小车是能够依据不同的方向而扭转车头朝向。
因为前两点性能百度地图 API 能够满足，然而第三点，腾讯地图 LBS，更新了新版本的接口，图标能够主动依据方向扭转朝向。所以抉择腾讯地址，缩小凋谢量，另外就是间接 API 反对，缩小了很多的 BUG。
开发前的筹备：
1、在腾讯位置服务中注册为开发者：
2、在控制台配置 Key
配置实现之后，就能够通过开发文档 -web 前端 -JavaScript-API 来获取腾讯位置服务的 LBS 组件
开始开发：
第一步：画页面，初始化地图：
把 key 中的 XXXXXXXXXXX 更换为咱们方才在腾讯地图 LBS 后盾获取的 key。
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>marker 轨迹回放 - 全局模式 </title> | |
| </head> | |
| <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=XXXXXXXXXXX"></script> | |
| <style type="text/css"> | |
| html, | |
| body { | |
| height: 100%; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| <body> | |
| <div id="container"></div> | |
| <script type="text/javascript"> | |
| var center = new TMap.LatLng(30.465512, 114.402740); | |
| // 初始化地图 | |
| var map = new TMap.Map("container", { | |
| zoom: 15, | |
| center: center | |
| }); | |
| </script> | |
| </body> | |
| </html> |
成果如图所示：
第二步：画路线，并依据路线模仿运行
这里须要留神的是，如果路线比较复杂，尽可能的应用分钟级，甚至秒级的坐标，这样绘制的轨迹也会更精准。速度的展现，须要后盾在记录坐标的时候计算好，并实时反馈。
| <script type="text/javascript"> | |
| var center = new TMap.LatLng(39.984104, 116.307503); | |
| // 初始化地图 | |
| var map = new TMap.Map("container", { | |
| zoom: 15, | |
| center: center | |
| }); | |
| 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, // 绘制到指标地图 | |
| // 折线款式定义 | |
| styles: { | |
| 'style_blue': new TMap.PolylineStyle({ | |
| 'color': '#3777FF', // 线填充色 | |
| 'width': 4, // 折线宽度 | |
| 'borderWidth': 2, // 边线宽度 | |
| 'borderColor': '#FFF', // 边线色彩 | |
| 'lineCap': 'round' // 线端头形式 | |
| }) | |
| }, | |
| geometries: [{ | |
| styleId: 'style_blue', | |
| paths: path | |
| }], | |
| }); | |
| 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) | |
| }] | |
| }); | |
| marker.moveAlong({ | |
| 'car': { | |
| path, | |
| speed: 250 | |
| } | |
| }, {autoRotation:true}) | |
| </script> |
另外须要后盾配合的是：
1、把汽车的轨迹坐标，依照秒级 / 分钟级记录，同时记录下轨迹记录的工夫。
2、把坐标绘制成轨迹，而不是仅仅设置终点和起点。
3、轨迹与轨迹之间用地图计算出来间隔，而后除以工夫计算出来速度。前端地图实时更新 marker.moveAlong 中的 car 的速度。来达到轨迹回放跟理论车辆运行速度统一的目标。
总结：
应用腾讯位置服务 API，是目前最简略的能够花轨迹 +Mark 图标追随轨迹挪动 +Mark 图标能够自适应转向的实现。
