记录一下在使用vue重构项目时，高德地图轨迹使用的问题。
在做项目中，碰到提供给用户radio-box，让用户选择看哪条轨迹，高德地图js api手册只是陈列了方法.hide()以及.show()，但没有仔细介绍如何使用方法，实例中也没有使用。
（调用Amap这里就不讲了）
我在网上搜了很多博客都没有找到如何使用这两种方法，但是手册里写着就觉得肯定可以实现所以不断尝试，最后总结一下写两个简单的例子。期间也尝试过通过setData([])清空轨迹数据重绘轨迹，但是在轨迹少时每一次点击重绘有点浪费，速度也会变慢，所以记录一下这两种方法在使用的优缺点。
第一种：.hide(),.show() 推荐轨迹较少时使用
轨迹的隐藏（hide）及显示（show）只需要第一遍加载时渲染轨迹，后面每次切换不需要重新渲染轨迹，因此速度较快，数据较少时使用很方便，具体操作如下：
第一部分：

<template>
	<div class="radioBox">
   		 <el-radio-group v-model="type" @change="handleCarWheelPathChange">
    				<el-radio :label="1">全选</el-radio>
    				<el-radio :label="2">去程</el-radio>
    				<el-radio :label="3">返程</el-radio>
 	   </el-radio-group>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			   type:1,//初始radio为1
			   map:null,
			  		}
			   },
		 mounted(){
		   this.initMap()
		   this.setMap()
		   		  },
		 methods: {
		 	initMap() {
				const self = this;
				self.map = new AMap.Map("test_Map", {
					zooms: [9, 18],
					resizeEnable: true
				});
			},
			setMap(){
			//自己项目的数据
			let lineArrDepart=[]
			let lineArrReturn=[]
				function initPageDepart(PathSimplifier, $) {
						let pathSimplifierInsDepart = new PathSimplifier({
							zIndex: 100,
							map: self.map,
							getPath: function(pathData, pathIndex) {
								return pathData.path;
							},
							//轨迹样式，具体参照高德地图api文档，这里觉得太长就删除了
							renderOptions: {
								"pathTolerance": 2,
								"keyPointTolerance": -1,
								"renderAllPointsIfNumberBelow": 0,
								"pathLineStyle": {
									"lineWidth": 6,
									"strokeStyle": "#3f34f8",
									"borderWidth": 1,
									"borderStyle": "#cccccc",
									"dirArrowStyle": true
								},
							}
						});
						window.pathSimplifierInsDepart = pathSimplifierInsDepart;
						function onload() {
							pathSimplifierInsDepart.render();
						};
						//lineArrDepart放轨迹数据
						pathSimplifierInsDepart.setData([{
							path: lineArrDepart
						}]);
					};

					function initPageReturn(PathSimplifier, $) {
						let pathSimplifierInsReturn = new PathSimplifier({
							zIndex: 99,
							map: self.map,
							getPath: function(pathData, pathIndex) {
								return pathData.path;
							},
							renderOptions: {
								"pathTolerance": 2,
								"keyPointTolerance": -1,
								"renderAllPointsIfNumberBelow": 0,
								"pathLineStyle": {
									"lineWidth": 6,
									"strokeStyle": "rgb(0,204,233)",
									"borderWidth": 1,
									"borderStyle": "#cccccc",
									"dirArrowStyle": true
								},
							}
						});
						window.pathSimplifierInsReturn = pathSimplifierInsReturn;
					
						function onload() {
							pathSimplifierInsReturn.renderLater();
						};
						//设置数据--省略了这里的数据
						pathSimplifierInsReturn.setData([{
							path: lineArrReturn
						}]);
					};
					AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
						initPageDepart(PathSimplifier, $);
						initPageReturn(PathSimplifier, $);
					});
			},
			handleCarWheelPathChange() {
				const self = this;
				if(self.type=== 1) {
					pathSimplifierInsReturn.show()
					pathSimplifierInsDepart.show()
				}
				if(self.type=== 2) {
					pathSimplifierInsReturn.hide()
					pathSimplifierInsDepart.show()
				}
				if(self.type=== 3) {
					pathSimplifierInsDepart.hide()
					pathSimplifierInsReturn.show()
				}
			},
		
		 }
}
</script>

第二种：.setData([]) --轨迹较多时
.setData([])方法,手册中有介绍到这个方法会直接触发重绘轨迹，没有尝试用过.clear()的方法，这个参照了Http：bbbbb的blog，这篇blog有讲到.clear()把所有覆盖物都一起清除。由于项目中一个页面地图container对应一个id，每次绘制轨迹也都在同一个地图，但是不同的车需要在地图绘制不同的数据，如果不把数据清空的话，地图页面会不断叠加新绘制的轨迹，每次触发绘制轨迹会导致轨迹越来越长，（车可能数量很大）也没有必要把一次性所有的轨迹一次性渲染完毕再全部隐藏，速度会慢并且有点浪费。所以每次触发绘制轨迹时需要先清空旧轨迹数据再绘制新轨迹。

AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
//每次处罚需要重新绘制时先判断页面上有没有轨迹，有轨迹就先把轨迹数据清空
					if(window.pathSimplifierInsReturn) {
						pathSimplifierInsReturn.setData([])
						pathSimplifierInsDepart.setData([])
					}
						initPageDepart(PathSimplifier, $);
						initPageReturn(PathSimplifier, $);
					});

自己的项目是需要.hide().show().setData([])三个方法都使用的，如果说的不对欢迎指正～