Vue使用高德地图展现行车轨迹

一、地图初始化

1.下载包

npm i vue-amap -S

2.main.js引入

import Vue from "vue";

import AMap from "vue-amap";

Vue.use(AMap);

AMap.initAMapApiLoader({

key: "申请的你自己的高德地图key",

plugin: ["AMap.Autocomplete","AMap.PlaceSearch","AMap.Scale","AMap.OverView", "AMap.ToolBar", "AMap.MapType", "AMap.PolyEditor", "AMap.CircleEditor",],

// 默认高德 sdk 版本为 1.4.4

v: "1.4.4",

});

3.在public的index中引入

<scripttype="text/javascript"src="/maps?v=1.4.15&key=你的高德地图key"></script>

4.map.vue

/* 车辆轨迹*/<template><div class="main"><section class="section"><div id="container" style="width:100%;height:100%" /><div class="ebox"><el-button-group><input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" /><input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" /><input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" /><input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" /></el-button-group></div></section></div></template><script>export default {name: 'dashboard',data() {return {firstArr: [116.478935, 39.997761], //中心点/初始坐标=>联调时，用后台数据将此数据覆盖//绘制线路需要的坐标=>联调时，用后台数据将此数据覆盖(经纬度不要写反了,反了是出不来的)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],[108.983569, 34.285675],[106.205794, 38.458831],[111.761777, 40.875595],[103.85094, 35.987496]],map: null,marker: null,//moveSpeed:1000000,//需求要求改变速度的可保留}},mounted() { //异步加载（否则报错initMap is not defined）setTimeout(() => {this.initMap() // 初始化地图this.initroad()// 初始化轨迹}, 1000)},beforeDestroy() {//离开页面，销毁掉this.map && this.map.destroy();},methods: {// 初始化地图initMap() {this.map = new AMap.Map('container', {resizeEnable: true, // 窗口大小调整center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],zoom: 15})// 添加makerthis.marker = new AMap.Marker({map: this.map,position: this.firstArr,icon: '/images/car.png',offset: new AMap.Pixel(-26, -13), // 调整图片偏移autoRotation: true, // 自动旋转angle: -90 // 图片旋转角度})},// 初始化轨迹initroad() {// 将 icon 传入 marker(起始标记)var startMarker = new AMap.Marker({// position: new AMap.LngLat(116.35, 39.89),position: this.lineArr[0],// icon: startIcon,offset: new AMap.Pixel(-13, -30)});// 创建一个 iconvar endIcon = new AMap.Icon({size: new AMap.Size(25, 34),image: '///jsapi_demos/static/demo-center/icons/dir-marker.png',imageSize: new AMap.Size(135, 40),imageOffset: new AMap.Pixel(-95, -3)});// 将 icon 传入 markervar endMarker = new AMap.Marker({// position: new AMap.LngLat(116.45, 39.93),position: this.lineArr[this.lineArr.length - 1],icon: endIcon,offset: new AMap.Pixel(-13, -30)});// 将 markers 添加到地图this.map.add([startMarker, endMarker]);// 绘制还未经过的路线this.polyline = new AMap.Polyline({map: this.map,path: this.lineArr,showDir: true,strokeColor: '#28F', // 线颜色--蓝色// strokeOpacity: 1,//线透明度strokeWeight: 10, // 线宽// strokeStyle: "solid" //线样式lineJoin: 'round' // 折线拐点的绘制样式})// 绘制路过了的轨迹var passedPolyline = new AMap.Polyline({map: this.map,strokeColor: '#AF5', // 线颜色-绿色// path: lineArr.reverse(),// strokeOpacity: 1,//线透明度strokeWeight: 6 // 线宽// strokeStyle: "solid" //线样式})this.marker.on('moving', e => {passedPolyline.setPath(e.passedPath)})this.map.setFitView() // 合适的视口},startAnimation() {//车辆轨迹回放开始this.marker.moveAlong(this.lineArr, 1000000); //这里的1000000为速度，可根据绘制线路需要的坐标来调整//（调试时不要设置太小了，不然看不出来）//this.marker.moveAlong(this.lineArr, this.moveSpeed); },pauseAnimation() {//车辆轨迹回放暂停this.marker.pauseMove();},resumeAnimation() {//车辆轨迹回放继续this.marker.resumeMove();},stopAnimation() {//车辆轨迹回放停止this.marker.stopMove();},carFastMove() {//车辆轨迹回放改变速度this.moveSpeed = this.moveSpeed * 200;},}}</script><style scoped>.section {width: 100%;height: 700px;}::v-deep .amap-logo {display: none !important;;}::v-deep .amap-copyright {bottom: -100px;display: none !important;;}</style>

5.最后展示

二、地图的使用

1.车辆轨迹获取gps坐标转换成高德坐标

AMap.convertFrom('获取的gps坐标数组', 'gps', (status, result) => {if(status === 'complete') {const 新的数组 = result.locations // 转化后的高德坐标数组}map = new AMap.Map('放置地图标签的id', {......}}

(此处使用转换是因为gps坐标在高德地图会不精确定位)

注意：(！！！)

此时地图中心点与车辆轨迹的坐标都重新换成转换后的高德坐标

将地图初始化与轨迹绘制需全部放入，不然获取不到新的数组！！！