第一步、npm安装vue-amap
1.npm install vue-amap --save
2.在项目main.js引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
// 高德key
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'
}); 第二步、完整代码
<template>
<div class="trackquery">
<div id="container" class="map" :style="styleSize"></div>
<div class="contbtn" v-if="lineArr.length > 0">
<div class="flex-demo">
<el-button v-if="starshow" class="btncol" type="primary" @click="starmove">开始动画</el-button> </div> <div class="flex-demo"> <el-button :disabled="btndisabled" v-if="endshow ==true" class="btncol" type="danger" @click="endmove" >暂停播放</el-button> <el-button :disabled="btndisabled" v-if="endshow ==false" class="btncol" type="success" @click="resumeAnimation" >继续播放</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
styleSize: {
height: "",
width: ""
},
btndisabled: true,
starshow: true,
endshow: true,
map: "",
lineArr: [],
lineArrlast: [],
lineArrPre: [],
marker: "",
k: 0
};
},
created() {
//事件监听，实时获取屏幕宽高
window.addEventListener("resize", this.getHeight);
this.getHeight();
},
mounted() {
setTimeout(() => {
this.getmap();
}, 1000);
// 初始化地图
},
methods: {
getHeight() {
this.styleSize.height = window.innerHeight + "px";
this.styleSize.width = window.innerWidth + "px";
},
getmap() {
// 测试数据
this.lineArr = [ "37.8733379449,112.55877766927|37.8732877604,112.55876600477|37.8733064779,112.5587516276|37.8732354058,112.55877929688|37.8731488715,112.55866102431|37.8730938043,112.55855604384|37.8729125977,112.55849093967|37.872827691,112.55837158203|37.8727848307,112.55822238498|37.8727718099,112.55802517361|37.8728314887,112.55778184679|37.8729033746,112.55748616536|37.8728721788,112.5572781033|37.8728428819,112.55718641493|37.8728192817,112.55690456814|37.872827691,112.55672688802|37.8728881836,112.55657172309|37.8728849284,112.55644504123|37.8727517361,112.55618109809|37.8724210612,112.55612792969|37.8722357856,112.55611328125|37.8721343316,112.55603135851|37.8721443685,112.5558710395|37.8721072049,112.5559375|37.8720486111,112.55637315538|37.8722252062,112.55630886502|37.8722734918,112.5563031684|37.8730498589,112.55625108507" ];
let self = this;
let polylineX, nColorLength,
currentLen,
latlonarr,
pointList;
let colors = [
"#3366cc",
"#dc3912",
"#109618",
"#990099",
"#0099c6",
"#dd4477",
"#66aa00",
"#316395",
"#994499",
"#22aa99",
"#6633cc",
"#329262",
"#5574a6",
"#3b3eac"
];
this.map = new AMap.Map("container", {
resizeEnable: true,
center: [112.588043, 37.860335],
zoom: 12
});
if (this.lineArr.length > 0) {
for (let j = 0; j < this.lineArr.length; j++) {
polylineX = "polyline" + j; //计算取颜色的函数
nColorLength = colors.length;
currentLen = 0;
if (j > nColorLength) {
currentLen = j % 14;
} else {
currentLen = j;
}
latlonarr = this.lineArr[j].split("|");
if (latlonarr.length > 0) {
if (j < this.lineArr.length - 1) {
this.lineArrPre = [];
for (let i = 0; i < latlonarr.length; i++) {
pointList = latlonarr[i].split(",");
if (pointList.length > 0) {
this.lineArrPre.push(
new AMap.LngLat(pointList[1], pointList[0])
);
}
}
polylineX = new AMap.Polyline({
map: this.map,
path: this.lineArrPre,
showDir: true,
strokeColor: colors[currentLen], //线颜色
strokeWeight: 6 //线宽
});
} else {
//最后一条轨迹绘制移动轨迹
for (let i = 0; i < latlonarr.length; i++) {
pointList = latlonarr[i].split(",");
if (pointList.length > 0) {
this.lineArrlast.push(
new AMap.LngLat(pointList[1], pointList[0])
);
}
}
polylineX = new AMap.Polyline({
map: this.map,
path: this.lineArrlast,
showDir: true,
strokeColor: colors[currentLen], //线颜色
strokeWeight: 6 //线宽
});
if (this.lineArrlast.length > 0) {
this.marker = new AMap.Marker({
map: this.map,
position: [this.lineArrlast[0].lng, this.lineArrlast[0].lat],
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle: -90
});
}
var passedPolyline = new AMap.Polyline({
map: this.map,
// path: lineArr,
strokeColor: "#AF5", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 6 //线宽
// strokeStyle: "solid" //线样式
});
this.marker.on("moving", function(e) {
passedPolyline.setPath(e.passedPath);
});
}
}
}
}
this.map.setFitView();
},
//开始播放
starmove() {
this.endshow = true;
this.starshow = true;
this.btndisabled = false;
this.marker.moveAlong(this.lineArrlast, 500); },
//暂停播放
endmove() {
this.endshow = false;
this.marker.pauseMove();
},
//继续播放
resumeAnimation() {
this.endshow = true;
this.marker.resumeMove();
},
//停止播放
stopAnimation() {
this.marker.stopMove();
} }};
</script>
<style scoped>
.contbtn {
position: fixed;
top: 15%;
left: 12%;
min-height: 130px;
min-width: 200px;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btncol {
margin: 10px 0;
}
</style>