最近公司有个地图功能开发,根据车辆的行驶的经纬度,来画出车辆的移动轨迹,并模拟车辆在该线路的行驶过程。 效果图大致是这样的。
这个伟大的任务交给了我,经过一番调研我决定使用腾讯地图JS SDK来实现这一功能,为什么那?因为使用腾讯地图可以轻松移植到微信小程序里。而且他们最近更新和优化了很多API。 诸如,定位,地点搜索,路线规划,个性化地图。
说干就干,首先要使用腾讯地图SDK,必须要先申请appkey,点击链接申请
注意类型我们要选择JavaScriptAPI,在未上线之前,我们可以先不填域名白名单 创建完成之后,改怎么使用哪,
只需要在html的页面里引入即可
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=QSWBZ-AL2KU-4Q4VI-46ONV-26OOT-ISB5G"></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文档,里面包含了所有类的属性,方法。 谢谢观看。