Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制

行动路线轨迹绘制最近的新需求，查了本站大佬的博客，直接粘贴成功，闲的时候写个随笔记录下

原文地址：https://www.cnblogs.com/fozero/p/10867171.html

需求要求，点击003这个人显示他的行动轨迹，先看下效果图

使用

1、在index.html里面引入高德地图js文件

2、引入之后我们就直接可以在vue组件里面使用了

主要代码：

userMap:function(user,index){
            var _this = this;
            //请求按时间排序的user信息
            this.$http.post("../userLocation/getUserTrack",
                {
                    id:user.id
                },
                {emulateJSON:true}).then(function (response) {
                _this.userLocation  = response.body.data;
                if (_this.userLocation.length>0){//如果有经纬度数据就取出来放进数组中

                    var trackPath = [];
                    for(var i=0;i<_this.userLocation.length;i++){
                        trackPath.push(new AMap.LngLat(_this.userLocation[i].longitude, _this.userLocation[i].latitude))
                    }
                    //初始化地图
                    this.map = new AMap.Map('container', {
                        zoom:11,//级别
                        center: [113.668377, 34.719974],//中心点坐标
                        resizeEnable: true,
                        zoom: 12,
                    });
                    // 插件
                    AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
                        _this.map.addControl(new AMap.ToolBar())
                        _this.map.addControl(new AMap.Scale())
                    })
                    // marker标记(图标)
                    this.marker = new AMap.Marker({
                        position: null
                    })
                    this.map.add(this.marker);
                    // 绘制折线
                    this.path = new AMap.Polyline({
                        path: null,
                        isOutline: false,     //线条是否带描边，默认false
                        outlineColor: '#ffeeff',//线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
                        borderWeight: 1,    //描边的宽度，默认为1
                        strokeColor: "#3366FF", //线条颜色，使用16进制颜色代码赋值。默认值为#006600
                        strokeOpacity: 1,   //线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
                        strokeWeight: 2,    //线条宽度，单位：像素
                        // 折线样式还支持 'dashed'
                        strokeStyle: "solid",  //线样式，实线:solid，虚线:dashed
                        // strokeStyle是dashed时有效
                        strokeDasharray: [10, 5],//勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效
                        lineJoin: 'round',    //折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
                        lineCap: 'round',   //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
                        zIndex: 50,       //折线覆盖物的叠加顺序。默认叠加顺序，先添加的线在底层，后添加的线在上层。通过该属性可调整叠加顺序，使级别较高的折线覆盖物在上层显示默认zIndex：50、
                    })
                    // 将第一条经纬度记录添加marker标记(图标)
                    var lastTrack = new AMap.LngLat(_this.userLocation[0].longitude,_this.userLocation[0].latitude)
                    this.map.setCenter(lastTrack)
                    this.marker.setPosition(lastTrack)
                    this.marker.show()

                    // 将折线添加至地图实例
                    this.map.add(this.path);

                    this.path.setPath(trackPath)
                    this.path.show()
                } else {
                    alert("该用户暂无行动轨迹");
                }
            });
        },