一、地图初始化
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中引入
<script type="text/javascript"src="https://webapi.amap.com/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
})
// 添加maker
this.marker = new AMap.Marker({
map: this.map,
position: this.firstArr,
icon: 'https://webapi.amap.com/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)
});
// 创建一个 icon
var endIcon = new AMap.Icon({
size: new AMap.Size(25, 34),
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
imageSize: new AMap.Size(135, 40),
imageOffset: new AMap.Pixel(-95, -3)
});
// 将 icon 传入 marker
var 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坐标在高德地图会不精确定位)
注意:(!!!)
此时地图中心点与车辆轨迹的坐标都重新换成转换后的高德坐标
将地图初始化与轨迹绘制需全部放入,不然获取不到新的数组!!!