使⽤腾讯地图实现汽车沿轨迹⾏驶功能
前⾔
最近公司有个地图功能开发，根据车辆的⾏驶的经纬度，来画出车辆的移动轨迹，并模拟车辆在该线路的⾏驶过程。
效果图⼤致是这样的。
简易⼊门
⾸先进⼊腾讯位置服务页⾯然后进⾏注册账号，注册完成后需要，我们将在⾃⼰的应⽤中配置这个Key来使⽤SDK中的服务。
webserveapi默认勾选就可以，在未上线之前，我们可以先不填域名⽩名单。
只需要在html的页⾯⾥引⼊即可
<script charset="utf-8" src="map.qq/api/gljs?p&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="map.qq/api/gljs?p&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',
ujpaths: 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': 'mapapi.qq/web/lbs/javascriptGL/demo/img/car.png',
}),
"start": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'mapapi.qq/web/lbs/javascriptGL/demo/img/start.png'
}),
"end": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'mapapi.qq/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)
}]
});
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论