vue人员轨迹_vue使用高德地图进行轨迹回放

最近在做一个车辆管理系统，需要将车辆的定位轨迹通过高德地图回放出来。查找了一些文档后成功完成。

一、首先

在index.html中引入高德地图api

啊啊啊啊

其中的key需要你去高德地图注册获取，这里就不详细说了，度娘一查便知。

二、页面中使用

在trackquery.vue中去使用。在html中先设置一个id为"container"的容器

开始动画

停止动画

暂停动画

继续动画

应为有可能在定位的时间段中会有多条数据，这里就需要后端去做一些判断，将数据分离出来。

然后在下面的js中去实现逻辑，多余的不说了，看代码

data() {

return {

btndisabled: true,

loadshow: false,

loadtext: '提交中',

showtop: true,

starshow: true,

endshow: true,

userinfo: {},

cphList: [],

sjmcList: [],

cphid: '',

cphmc: '',

sjmcid: '',

sjmc: '',

startime: '',

endtime: '',

sigInfo: {},

map: "",

lineArr: [],

lineArrlast: [],

lineArrPre: [],

marker: '',

k: 0,

}

},

created() {

},

mounted() {

// 初始化地图

this.getmap()

},

methods: {

// 这个是点击查询，在上面设置个按钮绑定就可以查询到数据

getlineArr() {

this.btndisabled = true

this.starshow = true

this.endshow = true

this.map = ''

this.lineArr = []

this.line