Tencent Map API: Vehicle Track Playback

The author is working on an online car-hailing project recently, and I need to implement the vehicle's trajectory playback function. I use Tencent's location service. The specific operation is not difficult. Don't talk nonsense, and now I will show it to everyone!

1. First of all, because it is a function of the web page, you need to use the API of the map module, you can choose Baidu map or Tencent map.

2. Due to the need for location information, the map needs to support the point-to-point route drawing function.

3. Key point: a car is needed, and the car can change the front of the car according to different directions.

Because the first two functions of Baidu Map API can be satisfied, but the third point, Tencent Map LBS, has updated the interface of the new version, and the icon can automatically change the orientation according to the direction. Therefore, the Tencent address was chosen to reduce the amount of openness, and the other is the direct API support, which reduced a lot of bugs.

1. Register as a developer in Tencent Location Services:

2. Configure Key in the console

After the configuration is complete, you can obtain the LBS component of Tencent's location service through the development document-web front-end-JavaScript-API

Start developing:

The first step: draw the page, initialize the map:

Replace the XXXXXXXXXXX in the key with the key we just obtained in the Tencent Map LBS background.

<!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>
复制代码

The effect is as shown in the figure: Step 2: draw a route and simulate the operation according to the route

It should be noted here that if the route is complex, use minute-level or even second-level coordinates as much as possible, so that the drawn trajectory will be more accurate. The display of speed requires the background to calculate the coordinates when recording the coordinates and provide real-time feedback.

 <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>
复制代码

In addition, the background cooperation is required:

1. Record the track coordinates of the car in seconds/minutes, and record the time of the track record at the same time.

2. Draw the coordinates as a trajectory, instead of just setting the start and end points.

3. Use the map to calculate the distance between the track and the track, and then divide it by the time to calculate the speed. The front-end map updates the speed of the car in marker.moveAlong in real time. In order to achieve the purpose of the trajectory playback consistent with the actual vehicle running speed.

Summary: Using Tencent's location service API is currently the simplest implementation that can spend track + Mark icon follow the track + Mark icon can adaptively turn.

Tencent Map API: Vehicle Track Playback

Start developing:

Guess you like