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("該用戶暫無行動軌跡");
                }
            });
        },