关于腾讯地图:使用腾讯位置服务实现类滴滴汽车沿轨迹行驶功能

79次阅读

共计 5449 个字符，预计需要花费 14 分钟才能阅读完成。

前言

最近公司有个地图功能开发，依据车辆的行驶的经纬度，来画出车辆的挪动轨迹，并模仿车辆在该线路的行驶过程。
效果图大抵是这样的。

繁难入门

首先进入腾讯位置服务页面而后进行注册账号，注册实现后须要申请 AppKey，咱们将在本人的利用中配置这个 Key 来应用 SDK 中的服务。

webserveapi 默认勾选就能够，在未上线之前，咱们能够先不填域名白名单。

只须要在 html 的页面里引入即可

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

一个实现的例子

<!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>

把下面这段代码保留到 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 示意是否在前进途中主动将旋转

最终成果及源码

残缺的源码是这样的

<!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>

最终的成果

写在最初

腾讯位置服务提供了很多示例，如果做个需要没有脉络的话，能够先看看腾讯地图的示例核心。

如果你是高手，想做更多自定义扩大的性能，能够间接查看腾讯提供的 API 文档，外面蕴含了所有类的属性，办法。

作者：拿我格子衫来

链接：https://fizzz.blog.csdn.net/a…

起源：CSDN

著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

正文完
腾讯地图
发表至： 腾讯地图
2021-05-21
 0
时间选择器组件之关于table走过的弯路
关于腾讯地图:腾讯地图点聚合开发实现地图找房功能
关于腾讯地图:基于UE4Unity绘制地图基础元素线下篇
关于腾讯地图:vue腾讯位置服务-实现坐标拾取器功能