小白的高德地圖初體驗(三)——軌迹回放

這裡是官方文檔☛☛☛傳送門，走你~~

☞☞小白的高德地圖初體驗(一) —— 打點

☞☞小白的高德地圖初體驗(二)——點聚合

☞☞小白的高德地圖初體驗(三) ——軌迹回放

☞☞小白的高德地圖初體驗(四) —— 矢量圖形

☞☞小白的高德地圖初體驗(五)—— 資訊窗體

一、初始化

我們先形成一張帶軌迹的地圖。

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~