隨著共享經(jīng)濟(jì)的發(fā)展，網(wǎng)約車(chē)也在逐步的發(fā)展壯大，在諸如專(zhuān)車(chē)、順風(fēng)車(chē)網(wǎng)約車(chē)行業(yè)的程序員開(kāi)發(fā)從業(yè)人員需要做到的一個(gè)功能是車(chē)輛的軌跡回放，實(shí)現(xiàn)這個(gè)功能并不難，接下來(lái)就具體的操作下吧！
幾點(diǎn)tips：
1、首先因?yàn)槭荳eb網(wǎng)頁(yè)端的功能，所以需要用到的是地圖模塊的API，可以選擇百度地圖或者騰訊地圖。
2、由于需要位置信息，所以地圖需要支持點(diǎn)到點(diǎn)的路線(xiàn)繪制功能。
3、關(guān)鍵點(diǎn)：需要一個(gè)小車(chē)，并且小車(chē)是可以根據(jù)不同的方向而改變車(chē)頭朝向。
因?yàn)榍皟牲c(diǎn)功能百度地圖API可以滿(mǎn)足，但是第三點(diǎn)，騰訊地圖LBS，更新了新版本的接口，圖標(biāo)可以自動(dòng)根據(jù)方向改變朝向。所以選擇騰訊地址，減少開(kāi)放量，另外就是直接API支持，減少了很多的BUG。
1、在騰訊位置服務(wù)中注冊(cè)為開(kāi)發(fā)者：
2、在控制臺(tái)配置Key
配置完成之后，就可以通過(guò)開(kāi)發(fā)文檔-web前端-JavaScript-API來(lái)獲取騰訊位置服務(wù)的LBS組件
開(kāi)始開(kāi)發(fā)：
第一步：畫(huà)頁(yè)面，初始化地圖：
把key中的XXXXXXXXXXX更換為我們剛才在騰訊地圖LBS后臺(tái)獲取的key。
<!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=XXXXXXXXXXX"></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(30.465512, 114.402740);
//初始化地圖
var map = new TMap.Map("container", {
zoom: 15,
center: center
});
</script>
</body>
</html>
效果如圖所示：
第二步：畫(huà)路線(xiàn)，并根據(jù)路線(xiàn)模擬運(yùn)行
這里需要注意的是，如果路線(xiàn)比較復(fù)雜，盡可能的使用分鐘級(jí)，甚至秒級(jí)的坐標(biāo)，這樣繪制的軌跡也會(huì)更精準(zhǔn)。速度的展示，需要后臺(tái)在記錄坐標(biāo)的時(shí)候計(jì)算好，并實(shí)時(shí)反饋。
<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, // 繪制到目標(biāo)地圖
// 折線(xiàn)樣式定義
styles: {
'style_blue': new TMap.PolylineStyle({
'color': '#3777FF', //線(xiàn)填充色
'width': 4, //折線(xiàn)寬度
'borderWidth': 2, //邊線(xiàn)寬度
'borderColor': '#FFF', //邊線(xiàn)顏色
'lineCap': 'round' //線(xiàn)端頭方式
})
},
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>
另外需要后臺(tái)配合的是：
1、把汽車(chē)的軌跡坐標(biāo)，按照秒級(jí)/分鐘級(jí)記錄，同時(shí)記錄下軌跡記錄的時(shí)間。
2、把坐標(biāo)繪制成軌跡，而不是僅僅設(shè)置起點(diǎn)和終點(diǎn)。
3、軌跡與軌跡之間用地圖計(jì)算出來(lái)距離，然后除以時(shí)間計(jì)算出來(lái)速度。前端地圖實(shí)時(shí)更新 marker.moveAlong中的car的速度。來(lái)達(dá)到軌跡回放跟實(shí)際車(chē)輛運(yùn)行速度一致的目的。
總結(jié)：
使用騰訊位置服務(wù)API，是目前最簡(jiǎn)單的可以花軌跡+Mark圖標(biāo)跟隨軌跡移動(dòng)+Mark圖標(biāo)可以自適應(yīng)轉(zhuǎn)向的實(shí)現(xiàn)。
