记录一下在使用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([])三个方法都使用的，如果说的不对欢迎指正～