最近項目實踐中接觸高德地圖比較多，也發現高德地圖新增了一系列的UI組件庫，因此遇到一些新問題也只能自己琢磨。
頁面需求：查詢輸入框實現車輛的對應軌跡，在地圖上顯示相應的軌跡（此處，上一輛車的軌跡必須清除才能繪製下一輛車的運動軌跡）
自己寫了個類似功能的demo效果如下：
項目中一般是通過輸入車牌號並通過查詢按鈕請求接口得到數據並進行渲染（效果圖如下）
此處直接用靜態數據+兩個車輛按鈕查詢，直接貼入代碼：
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-demo.html -->
<base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>簡單路徑</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
.btn-group{
position:absolute;
z-index: 10;
right: 10px;
bottom:50px;
}
.btn-group button{
background-color:cornflowerblue;
color:#fff;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="btn-group">
<button class="btn-car1">車輛一模擬</button>
<button class="btn-car2">車輛二模擬</button>
</div>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.4&key=您申請的key值'></script>
<!-- UI組件庫 1.0 -->
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
//創建地圖
var map = new AMap.Map('container', {
zoom: 4
});
//此處靜態模擬兩輛車數據：
var Path={"car1": [
[116.405289, 39.904987],
[113.964458, 40.54664],
[111.47836, 41.135964],
[108.949297, 41.670904],
[106.380111, 42.149509],
[103.774185, 42.56996],
[101.135432, 42.930601],
[98.46826, 43.229964],
[95.777529, 43.466798],
[93.068486, 43.64009],
[90.34669, 43.749086],
[87.61792, 43.793308]
],
"car2":[
[113.964458, 40.54664],
[98.46826, 43.229964],
[116.405289, 39.904987],
[103.774185, 42.56996],
]},navg1;
//軌跡渲染函數，參數（Path:對應車輛的經緯度數組即軌跡相關數據）
function renderTrace(Path){
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
alert('當前環境不支持 Canvas！');
return;
}
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
//autoSetFitView:false,
map: map, //所屬的地圖實例
getPath: function(pathData, pathIndex) {
return pathData.path;
},
getHoverTitle: function(pathData, pathIndex, pointIndex) {
if (pointIndex >= 0) {
//point
return pathData.name + '，點：' + pointIndex + '/' + pathData.path.length;
}
return pathData.name + '，點數量' + pathData.path.length;
},
renderOptions: {
renderAllPointsIfNumberBelow: 100 //繪製路線節點，如不需要可設置爲-1
}
});
window.pathSimplifierIns = pathSimplifierIns;
//設置數據
pathSimplifierIns.setData([{
name: '路線0',
path:Path//傳入的軌跡數據
}]);
//對第一條線路（即索引 0）創建一個巡航器
navg1 = pathSimplifierIns.createPathNavigator(0, {
loop: false, //循環播放
speed: 1000000 //巡航速度，單位千米/小時
});
navg1.start();
map.setFitView();//根據地圖上添加的覆蓋物分佈情況，自動縮放地圖到合適的視野級別，參數overlayList默認爲當前地圖上添加的所有覆蓋物圖層
});
}
document.getElementsByClassName("btn-car1")[0].addEventListener("click",function(){
renderTrace(Path.car1);
});
document.getElementsByClassName("btn-car2")[0].addEventListener("click",function(){
renderTrace(Path.car2);
});
</script>
</body>
</html>運行上述代碼你會發現出現兩條軌跡，然而，我們是想要實現將上一條軌跡清除然後重新繪製新的車輛的運動軌跡，在經過百度一系列說沒辦法實現軌跡清除，和通過下面兩個方法都沒辦法清除之後
|
|
|
刪除地圖上所有的覆蓋物 |
|
|
|
刪除地圖覆蓋物數組，數組爲一個或多個覆蓋物。 |
本着任何事情都能有對應的解決方法的想法，還是讓自己找到了實現軌跡清除的方法，就是下面這段代碼，完美的清除了上一條軌跡：
if (window.pathSimplifierIns) {
//通過該方法清空上次傳入的軌跡
pathSimplifierIns.setData([]);
}首先判斷是否存在對應的軌跡組件示例，如果已經存在，則將該軌跡示例進行清空（此處曾嘗試設置pathSimplifierIns=null也無法清除軌跡），清空的方法爲通過setData傳入空數組的軌跡數據。
|
|
|
設定數據源數組，並觸發重新繪製。data爲空時將清除顯示內容。 |
在此，也給下導航器事件觸發方法：
|
|
|
開始路徑巡航。
如果是浮點類型，則整數部分表示起始點索引，小數部分表示起始點和下一節點間的比例位置。比如 |
|
|
|
暫停巡航 |
|
|
|
恢復巡航 |
|
|
|
停止巡航，同時清除已經過路徑（這一點不同於pause） |
|
|
|
銷燬巡航器。巡航作爲動畫過程是非常耗費性能的，因此不再需要時應及時銷燬 |
|
|
|
設定巡航器的速度，單位千米/小時 |