1、高德地圖web示例
最近要做一個根據(jù)用戶車牌號查詢用戶定位和運(yùn)動軌跡的功能，第一時間想到做web端的方便便于維護(hù)，且我們ios端是用h5框架編寫的，也方便ios去使用，去查了一下高德地圖，欸？這不就有現(xiàn)成的直接用嗎。感慨一句真方便。如下圖。
RPReplay_Final1564452712 (2).gif
怎么樣，是不是超級方便？然后我們只要在app中的webview中打開它就可以了。開始動畫，結(jié)束動畫，選擇時間統(tǒng)統(tǒng)交給web端去做，當(dāng)然你也可以注入js來調(diào)用查詢方法，隨便你來定義啦。
2、高德地圖示例代碼
官網(wǎng)上就有詳細(xì)的示例代碼，這里貼上官網(wǎng)地址：高德地圖軌跡回放示例，嫌麻煩沒問題，代碼都幫你們拷過來了。
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>軌跡回放</title>
<link rel="stylesheet" />
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.input-card .btn{
margin-right: 1.2rem;
width: 9rem;
}
.input-card .btn:last-child{
margin-right: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
<h4>軌跡回放控制</h4>
<div class="input-item">
<input type="button" class="btn" value="開始動畫" id="start" onclick="startAnimation()"/>
<input type="button" class="btn" value="暫停動畫" id="pause" onclick="pauseAnimation()"/>
</div>
<div class="input-item">
<input type="button" class="btn" value="繼續(xù)動畫" id="resume" onclick="resumeAnimation()"/>
<input type="button" class="btn" value="停止動畫" id="stop" onclick="stopAnimation()"/>
</div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
<script>
var marker, lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 17
});
marker = new AMap.Marker({
map: map,
position: [116.478935,39.997761],
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle:-90,
});
// 繪制軌跡
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir:true,
strokeColor: "#28F", //線顏色
// strokeOpacity: 1, //線透明度
strokeWeight: 6, //線寬
// strokeStyle: "solid" //線樣式
});
var passedPolyline = new AMap.Polyline({
map: map,
// path: lineArr,
strokeColor: "#AF5", //線顏色
// strokeOpacity: 1, //線透明度
strokeWeight: 6, //線寬
// strokeStyle: "solid" //線樣式
});
marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath);
});
map.setFitView();
function startAnimation () {
marker.moveAlong(lineArr, 200);
}
function pauseAnimation () {
marker.pauseMove();
}
function resumeAnimation () {
marker.resumeMove();
}
function stopAnimation () {
marker.stopMove();
}
</script>
</body>
</html>
如上圖，只寫android，沒接觸過js的同學(xué)可能有點(diǎn)看不太懂，沒問題，我來簡單介紹一下，代碼中的marker和lineArr分別代表了覆蓋物和線路，這個marker可以直接定義，比如在高德地圖app中就是那個藍(lán)色的定位圖標(biāo)
定位圖標(biāo)
就是這個玩意兒，在軌跡回放中呢，我們可以把他設(shè)計為一部車的形象，而lineArr就更好理解了，就是一個經(jīng)緯度的數(shù)組，里面是車的行車路線的經(jīng)緯度，然后可以調(diào)用new AMap.Polyline的方法來繪制一個行車軌跡，賓果！就是這么簡單。
3、軌跡回放結(jié)合軌跡糾偏
因?yàn)楹献鞣教峁┑淖鴺?biāo)系擔(dān)心不準(zhǔn)確，所以嘗試了一下高德自帶的軌跡糾偏的api，軌跡糾偏接口可以將偏離道路的軌跡路徑糾正到道路上，在地圖上顯示會看起來細(xì)節(jié)一點(diǎn)，比如說如下圖
未糾偏紅色和糾偏后藍(lán)色對比
可以看到，一般我們的點(diǎn)對點(diǎn)繪制，都是直來直去的，兩個點(diǎn)之間轉(zhuǎn)折很突兀，但是用高德的軌跡糾偏，只要傳過去相應(yīng)格式的坐標(biāo)系，就會給你返回糾正后的坐標(biāo)系，官方使用方法在這里高德地圖軌跡糾偏，不知道為什么，我用了軌跡糾偏在高速路上的表現(xiàn)慘不忍睹，甚至沒有原坐標(biāo)系好，但是在城區(qū)的表現(xiàn)比原坐標(biāo)好很多。
記錄一下這次軌跡回放功能的實(shí)現(xiàn)，就寫到這里吧。
