使用腾讯地图实现汽车沿轨迹行驶功能

最新推荐文章于 2024-06-11 22:32:23 发布
最新推荐文章于 2024-06-11 22:32:23 发布
阅读量975 收藏 10
点赞数 3
原文链接：https://fizzz.blog.csdn.net/article/details/111764120
版权
本文介绍了如何利用腾讯位置服务的JavaScript GL SDK，通过注册账号获取AppKey，创建地图并设置视角，绘制折线模拟车辆行驶轨迹，以及添加汽车标记并使其沿轨迹移动。详细步骤包括地图初始化、折线绘制、标注添加和动态移动等，适合地图功能开发初学者参考。
摘要由CSDN通过智能技术生成

前言

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

image.png

简易入门

首先进入腾讯位置服务页面然后进行注册账号，注册完成后需要申请AppKey，我们将在自己的应用中配置这个Key来使用SDK中的服务。

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

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文件中，用浏览器打开，就可以看到一个地图,如下：

image.png

实现需求：汽车行驶在地图上

我们要想让车在地图上跑起来，首先要画出一条线。

由点连线

有了地图之后，我们要在地图上划线的话需要用到这个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
  }],
});

代码效果图

image.png

要画线，必须要先有点，而点在地图上表现为一个经纬度，即这样的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中定义样式在那个地方使用。

做完上面一步，车辆已经出现在了轨迹上的起点，但还不会自己走，
如图

image.png

在腾讯地图中如果要让一个地图走，需要使用的
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>

最终的效果

20201226175852284.gif

写在最后

腾讯位置服务提供了很多示例，如果做个需求没有头绪的话，可以先看看腾讯地图的示例中心。

如果你是高手，想做更多自定义扩展的功能，可以直接查看腾讯提供的API文档，里面包含了所有类的属性，方法。

作者：拿我格子衫来

链接：https://fizzz.blog.csdn.net/article/details/111764120

来源：CSDN

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

_低调的哈哈_
关注
uniapp(全端兼容) - 最新详细实现腾讯地图轨迹回放功能，uniapp腾讯地图点击按钮播放地图绘制的轨迹，并自定义在轨道上行驶的汽车图片图标、汽车顶部文字信息、自定义轨道样式（详细示例运行代码）
高级前端工程师
05-17 4014
uni-app，腾讯地图，地图轨迹，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，在腾讯地图上画行驶轨迹并让一辆车在上面跑，如何在uniapp小程序中实现腾讯地图轨迹回放，在uni-app所有平台上兼容腾讯地图，报错，uniapp中实现实时定位和轨迹回放，汽车沿轨迹行驶功能，使用腾讯地图api实现轨迹回放，腾讯地图轨迹移动用什么API，显示小车轨迹动画回放，UniApp使用腾讯API地图、路线轨迹、marker标记点，对车辆行驶轨迹进行轨迹
vue中使用腾讯地图api实现轨迹回放
qq_53663377的博客
08-13 1414
vue中使用腾讯地图api实现轨迹回放
腾讯位置服务GPS轨迹回放-安卓篇
腾讯位置服务
06-04 619
前言 当我们使用地图进行开发时，利用已经录制好的轨迹进行轨迹回放来检查导航的准确性是十分常用的手段，并且上一篇已经讲完了关于地图使用时GPS轨迹文件的录制，现在对于安卓系统下使用腾讯导航SDK进行轨迹回放做一个分享 前期准备 腾讯导航SDK依赖于腾讯地图SDK、腾讯定位SDK，具体权限的开通需要去lbs.qq.com 的官网控制台去操作,另外导航SDK的权限可以联系小助手咨询（如下图所示），这里就不多做探讨 轨迹回放正片 系统架构 GPS回放系统分成两部分：GPSPlaybackActivity 和 G
高德地图--- 会动的小汽车（行动轨迹回放）demo效果（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-11 1606
高德地图--- 会动的小汽车（行动轨迹回放）
高德地图——车随轨迹点移动
who_become_gods的博客
12-02 4934
经常有人问怎么控制车辆车头方向随着行进方向改变, 怎么展示车辆运行轨迹 在高德地图中展示车辆轨迹有三种方法，一种方法是AMapUI的PathSimplifier创建巡航器来展示轨迹： 高德地图轨迹展示示例 第二种方法是使用moveAlong,moveAlong可以让marker按照给定的经纬度数组以指定的速度移动 高德地图轨迹回放示例 第三中方法是使用moveTo，moveTo可以让marker以给定的速度从一个经纬度移动到另一个经纬度并自动调整车头方向(车头方向与起点到终点的直线平行)。也可以看做move
【腾讯地图】实现汽车、人员沿轨迹运动js源代码
FormatRain的博客
06-02 472
【腾讯地图】实现汽车、人员沿轨迹运动的功能代码
PHP开发#调用腾讯地图
qq_41441669的博客
01-15 1978
PHP开发#导入腾讯地图那么简单？？ 1.首先我们打开腾讯地图官网：https://lbs.qq.com/webApi/component/componentGuide/componentPicker 腾讯地图模糊搜索地址。 直接复制代码粘贴即可。 <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type
腾讯地图、微信小程序、轨迹、路线图、marker标记点
05-27
本项目涉及的是利用腾讯地图服务在微信小程序中实现轨迹和路线图的展示，以及使用marker标记点来突出特定位置。以下是相关知识点的详细说明： 1. **腾讯地图API**：腾讯地图提供了一系列的JavaScript API，可以用于...
Vue + OpenLayer + 天地图 + 腾讯位置服务实现路径规划（一）
最新发布
分享GIS, .Net
06-11 514
Vue；天地图；OpenLayerl；跨域问题；腾讯位置服务API；路径规划；
python地图gps轨迹可视化_GPS轨迹可视化的三种方法
weixin_39732506的博客
12-07 3592
Contents:1、GIS软件2、js在线工具或api3、万能的Python做ML的时候，清洗数据也好，特征工程也好，当遇到时空数据，或者要建立LBS特征时，难免需要对坐标维度做可视化打点，来分析其他特征维度的稳定性或相关性，或者单纯分析轨迹、位置分布的性质。这里给出三类方法：GIS软件主流的有ArcGIS(收费)、QGIS(开源)。像IDE一样，建立项目，配置各类params，然后导入数据文件...
C#GMap地图开发--轨迹回放功能
07-25
主要功能： 1.规范地图文件txt格式-在地图控件上显示 2.切换地图源 3.自定义地图图标 4.自定义线路颜色、图标 5.自适应屏幕
地图的使用及实时绘制轨迹
07-14
帮助需要进行地图开发的新手们了解iOS地图的使用,包含了定位/位移/绘制轨迹等功能
腾讯地图GL（轨迹回放）
Manong
08-04 1330
详细讲解实现腾讯地图GL的轨迹回放功能
腾讯位置服务实现轨迹回放
腾讯位置服务
10-16 7175
前言 在地图接入使用中，很多开发者咨询我们腾讯位置服务是否支持轨迹回放功能，所以今天特意将我们JavaScript API GL的轨迹回放&小车移动示例放到我们本篇文章分享。 轨迹回放&小车移动 在JavaScript API GL中，使用MultiMarker（点标记）中的moveAlong()方法 ，可以方便的实现轨迹回放功能，而且您可以对样式进行各种想要的修改，比如修改小车图片、不显示路线或者改成您想要的颜色等。 代码 //初始化地图 var map = new TMap.Map("
使用腾讯地图API完成车辆轨迹回放，同时能模拟真实的速度和方向
Java/Python随笔专栏
01-28 2669
产品需求： 根据能够回放出来车辆的运行轨迹路线、运行方向和速度。 需求分析： 1、首先因为是Web网页端的功能，所以需要用到的是地图模块的API，可以选择百度地图或者腾讯地图。 2、由于需要位置信息，所以地图需要支持点到点的路线绘制功能。 3、关键点：需要一个小车，并且小车是可以根据不同的方向而改变车头朝向。 因为前两点功能百度地图API可以满足，但是第三点，腾讯地图LBS，更新了新版本的接口，图标可以自动根据方向改变朝向。所以选择腾讯地址，减少开放量，另外就是直接API支持，减少了很多的...
腾讯地图实现车辆轨迹回放功能
小小码农biubiubiu
03-24 900
有的项目比如专车、城际车、代驾、顺风车等网约车行业，需要做车辆轨迹回放，这里给大家分享一下如何用腾讯位置服务API完成车辆轨迹回放的，并且在车辆轨迹回放中模拟了真实的速度和方向。 提前要说的几点： 1、首先因为是Web网页端的功能，所以需要用到的是地图模块的API，可以选择百度地图或者腾讯地图。 2、由于需要位置信息，所以地图需要支持点到点的路线绘制功能。 3、关键点：需要一个小车，并且小车是可以根据不同的方向而改变车头朝向。 因为前两点功能百度地图API可以满足，但是第三点，腾讯地图LBS，更新了新版本的
Android腾讯位置服务路线绘制demo
_低调的哈哈_
09-15 521
前言 开发者在面对配送行业场景，诸如外卖，B2C零售，商超等需要路线规划的功能，尤其网约车行业，还需要用到计算路费、动画模拟小车在路线上行驶等功能，这个腾讯位置服务产品的小demo就可以实现定位、规划路线、计算距离和路费，以及模拟小车平滑移动等基础功能。 实现步骤 先看下实现效果： 新建个Android项目并新建个Activity，命名为DrivingRouteActivity，先来画一下UI布局，布局比较简单，由一个腾讯SDK包下的地图组件MapView，以及两个用于输入起始位置的输入框，两个确认路线规划
Android中高德地图通过经纬度简单的实现小车轨迹回放功能
gao6402246的博客
11-22 3280
引文：记录下最近实现的一点简单小功能，对接高德API简单实现了小车轨迹回放功能. 效果图:           实现的功能:简单实现车辆根据经纬度平滑移动的效果，滑过的线条变红色，每个经纬度设置了自定义的Marker，后期可以 根据传入的参数设置Button实现时间，速度，回放等功能. 准备工作:         APP已成功显示高德地图，（KEY值，权限，服务等）并拿到AMap对象 ...
数据可视化API之轨迹图实现
腾讯位置服务
01-22 4170
前言 数据可视化API（Web），是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎。 通过这套API，可以实现轨迹数据、坐标点数据、热力、迁徙、航线等空间数据的可视化展现。 使用步骤 1、注册成为腾讯位置服务开发者，并进入控制台 -> key管理界面创建key； 2、数据可视化API（以下简称可视化API），所提供的可视化效果是以图层的方式叠加在JavaScript API GL之上，图层中所显示的数据由实例化的对象统一管理。 3、加载可视化API 可视化A
taro小程序使用腾讯地图如何实现分享位置功能
05-21
要在 Taro 小程序中实现分享位置功能，可以通过以下步骤： 1. 在小程序中引入腾讯地图 SDK，可以使用腾讯地图提供的 JavaScript API SDK 或者微信小程序 SDK。 2. 在页面中添加一个按钮，用于触发定位并获取当前位置信息。 3. 在按钮的点击事件中，调用腾讯地图 SDK 的定位功能，获取当前位置信息。 4. 将获取到的位置信息传递给微信小程序的分享 API，生成一个包含位置信息的分享卡片。 5. 用户点击分享卡片后，可以跳转到地图页面，查看分享的位置信息。 具体实现步骤可以参考腾讯地图和微信小程序官方文档，或者参考其他开发者的实现经验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值