Product requirements:

Based on the vehicle’s trajectory, direction and speed that can be played back.

Demand analysis:

1. First of all, because it is the function of the Web page, we need to use the API of the map module. We can choose Baidu Map or Tencent Map.

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

3. Key points: a car is needed, and the car can change its front orientation according to different directions.

Because the first two functions of Baidu Map API can meet, but the third point, Tencent map LBS, updated the new version of the interface, ICONS can automatically change orientation according to the direction. So choose Tencent address, reduce the number of open, another is direct API support, reduce a lot of bugs.

Preparation before development:

1. Register as a developer in Tencent Location Service:

2. Configure Key on the console

After the configuration is completed, the LBS component of Tencent location service can be obtained by developing document-Web front-end -JavaScript-API

Start development:

Step 1: Draw the page and initialize the map:

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

<! DOCTYPEhtml>
<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 trajectory playback - Global mode</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);
    // Initialize the map
    var map = new TMap.Map("container", {
      zoom: 15.center: center
    });
 
  </script>
</body>
 
</html>
Copy the code

The effect is as follows:

Step 2: Draw a route and run according to the route simulation

It is important to note that if the path is complex, use minute or even second coordinates as much as possible, so that the path will be more accurate. The display of speed, the need for the background in the record of coordinates when the calculation, and real-time feedback.

 <script type="text/javascript">
    var center = new TMap.LatLng(39.984104.116.307503);
    // Initialize the map
    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, // Draw the target map
      // Line style definition
      styles: {
        'style_blue': new TMap.PolylineStyle({
          'color': '#3777FF'.// Line fill color
          'width': 4.// Fold width
          'borderWidth': 2.// The edge width
          'borderColor': '#FFF'.// Edge color
          'lineCap': 'round' // Line end mode})},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>
Copy the code

In addition, the backstage cooperation is needed:

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

2. Draw coordinates as trajectories rather than just starting and ending points.

3. Calculate the distance between tracks using the map, and then divide by time to calculate the speed. Front end map updates car speed in Marker. MoveAlong in real time. To achieve track playback with the actual vehicle speed.

Conclusion: The use of Tencent location service API is the simplest realization that the trajectory +Mark icon can follow the trajectory +Mark icon can adapt to the steering.