Use Tencent&#39;s location service to realize the function of driving along the track of Didi cars

Preface

Recently, the company has developed a map function. According to the longitude and latitude of the vehicle, it draws the moving track of the vehicle and simulates the driving process of the vehicle on the line.
The effect picture is roughly like this.

Easy entry

Tencent first position into the service page and then register an account, you need to complete the registration application AppKey , we will configure this Key in your own applications to use the SDK service.

企业微信20210521-111830@2x.png

Webserveapi is ticked by default. Before going online, we can leave the domain name whitelist unfilled.

Only need to be introduced in the html page

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你刚申请的key"></script>

A completed example

<!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>创建地图</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
  html,
  body {
    height: 100%;
    margin: 0px;
    padding: 0px;
  }

  #container {
    width: 100%;
    height: 100%;
  }
</style>

<body onload="initMap()">
  <div id="container"></div>
  <script type="text/javascript">
    function initMap() {
      var center = new TMap.LatLng(39.984104, 116.307503);
      //初始化地图
      var map = new TMap.Map("container", {
        rotation: 20,//设置地图旋转角度
        pitch: 30, //设置俯仰角度（0~45）
        zoom: 12,//设置地图缩放级别
        center: center//设置地图中心点坐标
      });
    }
  </script>
</body>

</html>

Save the above code in an html file, open it with a browser, and you can see a map, as follows:

Realizing the demand: the car is driving on the map

If we want the car to run on the map, we must first draw a line.

Connected by dots

After we have the map, we need to use the 060a7618751423 class, polyline MultiPolyline Polylines are generally used in scenes such as motion track display and route planning display.

This class is to draw single or batch polylines in a layer mode, and delete and modify operations. You can create, modify, and delete on the map.

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
  }],
});

Code rendering

To draw a line, you must first have a point, and the point is represented as a longitude and latitude on the map, that is, new TMap.LatLng(39.98481500648338, 116.30571126937866) . After we have a set of points, we can connect the points and finally form a polyline.

Of course, we can also modify first, change the line color, width, edge width, edge color, line end method

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
  }],
});

Things move along the line

After having the line, that is, after the driving track, we need to add a car logo at the beginning of the line, and then let the car walk along the line,
To add a mark on the map in Tencent map, you need to use the MultiMarker class. This class allows you to go to multiple mark points on the map and customize the icon for the mark.

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)
  }]
});

Define the mark style in styles. There are three types: when the vehicle starts, when the vehicle is moving, and when the vehicle ends.
Define the style in geometries to be used in that place.

After finishing the above step, the vehicle has appeared at the starting point on the trajectory, but it will not go by itself yet.
As shown

If you want to let a map go in Tencent map, you need to use
MultiMarker's moveAlong method, specific usage

marker.moveAlong({
  'car': {
    path,
    speed: 250
  }
}, {
  autoRotation: true
})

path is the path the marker walks on, speed is the speed, autoRotation indicates whether it will automatically rotate during the journey

Final effect and source code

The complete source code is like this

<!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=QSWBZ-AL2KU-4Q4VI-46ONV-26OOT-ISB5G"></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(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>
</body>

</html>

Final effect

Write at the end

Tencent location service provides a number of examples, if not demand to be a clue, you can take a look at Tencent map sample center .

If you are a master and want to do more custom extension functions, you can directly check provided by Tencent, which contains all the attributes and methods of the class.

Author: Bring me a plaid shirt
Link: https://fizzz.blog.csdn.net/article/details/111764120
Source: CSDN
The copyright belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.

Use Tencent's location service to realize the function of driving along the track of Didi cars

Preface

Easy entry

Realizing the demand: the car is driving on the map

Connected by dots

Things move along the line

Final effect and source code

Write at the end

腾讯位置服务

引用和评论

轨迹云全新发布：外业车辆、人员、设备轨迹高效管理

地图投影

Use Tencent&#39;s location service to realize the function of driving along the track of Didi cars

Preface

Easy entry

Realizing the demand: the car is driving on the map

Connected by dots

Things move along the line

Final effect and source code

Write at the end

腾讯位置服务

引用和评论

轨迹云全新发布 ：外业车辆、人员、设备轨迹高效管理

地图投影

Use Tencent's location service to realize the function of driving along the track of Didi cars

轨迹云全新发布：外业车辆、人员、设备轨迹高效管理