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

编程入门行业动态更新时间:2024-10-11 11:17:25

使用<a href=https://www.elefans.com/category/jswz/34/1770070.html style= 腾讯地图实现汽车沿轨迹行驶功能"/>

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

前言

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

简易入门

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

webserveapi默认勾选就可以，在未上线之前，我们可以先不填域名白名单。

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

<script charset="utf-8" src="=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="=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': '.png',}),"start": new TMap.MarkerStyle({"width": 25,"height": 35,"anchor": { x: 16, y: 32 },"src": '.png'}),"end": new TMap.MarkerStyle({"width": 25,"height": 35,"anchor": { x: 16, y: 32 },"src": '.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="=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': '.png',}),"start": new TMap.MarkerStyle({"width": 25,"height": 35,"anchor": { x: 16, y: 32 },"src": '.png'}),"end": new TMap.MarkerStyle({"width": 25,"height": 35,"anchor": { x: 16, y: 32 },"src": '.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>

最终的效果