小白的高德地图初体验(三)——轨迹回放

小白的高德地图初体验(三)——轨迹回放

这里是官方文档☛☛☛传送门，走你~~

☞☞小白的高德地图初体验(一) —— 打点
☞☞小白的高德地图初体验(二)——点聚合
☞☞小白的高德地图初体验(三) ——轨迹回放
☞☞小白的高德地图初体验(四) —— 矢量图形
☞☞小白的高德地图初体验(五)—— 信息窗体

---

一、初始化

我们先形成一张带轨迹的地图。

data() {
        return {
            AMap: {},
            maps: {},
            passedPolyline: {},
            markerSpee: 200,
            marker: {},
            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],
                [116.484648, 39.999861]
            ]
        }
    },

然后写一个初始化地图的方法。

  methods: {
        initMap() {
            MapLoader().then(() => {
                this.AMap = window.AMap
                let { AMap } = this
                this.maps = new AMap.Map("map", {
                    resizeEnable: true,
                    center: [116.397428, 39.90923],
                    zoom: 15
                })

                this.marker = new AMap.Marker({
                    map: this.maps,
                    position: [116.478935, 39.997761],
                    icon: "https://webapi.amap.com/images/car.png",
                    offset: new AMap.Pixel(-26, -13),
                    autoRotation: true,
                    angle: -90
                })

                let polyline = new AMap.Polyline({
                    map: this.maps,
                    path: this.lineArr,
                    showDir: true,
                    strokeColor: "#28F", //线颜色
                    strokeWeight: 6 //线宽
                })
                this.maps.setFitView()
            })
        }

这样就能获取一个带轨迹的地图了，喏张这样，长这样哦~

二、让车子动起来

initMap()方法中添加

this.passedPolyline = new AMap.Polyline({
	map: this.maps,
   strokeColor: "#AF5", //线颜色
   strokeWeight: 6 //线宽
})
this.marker.on("moving", e => {
   this.passedPolyline.setPath(e.passedPath)
})

加一些方法，让它动起来。

 //开始
startAnimation() {
    this.marker.moveAlong(this.lineArr, 200)
},
//暂停
pauseAnimation() {
    this.marker.pauseMove()
},
//继续
resumeAnimation() {
    this.marker.resumeMove()
},
//停止
stopAnimation() {
    this.marker.stopMove()
},
//X2.0
accelerate() {
    this.marker.moveAlong(this.lineArr, 400)
},
//X1.0
slow() {
    this.marker.moveAlong(this.lineArr, 100)
}

这个地方是有个问题的，加速的时候会从起点重新开始跑，而不是从点击加速的时的位置开始加速（这个问题有缘更新哈~~~相信聪明的你们可以解决的哦~）

---

大概就是这样，更多的知识点请看官网。
这里是关于轨迹的一门☛☛武功绝学（moveAlong方法等用法）

如果需要代码的 ，直接回复、私信都可以的哈~~~

有缘再见ヾ(￣▽￣)Bye~Bye~