小白的高德地图初体验(二)——轨迹

2020-11-25 19:02:17 阅读：349 来源： 互联网

标签：初体验 maps 小白轨迹 AMap marker new lineArr 高德

小白的高德地图初体验(二)——轨迹

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

☞☞小白的高德地图初体验(一) —— 打点
经过上面一张，我们今天来看看轨迹怎么形成，还有它自带动画的效果。

一、初始化

我们先形成一张带轨迹的地图。
现在data中定义一些必须要的~~~

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方法等用法）
有时间的话会更新的更加完整，需要代码的，直接回复、私信都可以的哈~~~

标签：初体验,maps,小白,轨迹,AMap,marker,new,lineArr,高德
来源： https://blog.csdn.net/qq_42581563/article/details/110082104

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小白的高德地图初体验(二)——轨迹