Vue項目（vuecli3.0搭建）集成高德地圖實現路線軌跡繪制

先看最后實現的效果圖

高德地圖api文檔

https://lbs.amap.com/api/javascript-api/summary

使用

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

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

創建initMap方法，在mounted鈎子函數中調用

mounted(){
    this.initMap()
  },

initMap(){
      let that = this
      this.map = new AMap.Map('track-map', {
          zoom:11,//級別
          center: [116.397428, 39.90923],//中心點坐標
          resizeEnable: true,
          zoom: 12,
      });
      // 插件
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
        that.map.addControl(new AMap.ToolBar())
        that.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: "dashed",  //線樣式，實線:solid，虛線:dashed
        // strokeStyle是dashed時有效
        strokeDasharray: [10, 5],//勾勒形狀輪廓的虛線和間隙的樣式，此屬性在strokeStyle 為dashed 時有效
        lineJoin: 'round',    //折線拐點的繪制樣式，默認值為'miter'尖角，其他可選值：'round'圓角、'bevel'斜角
        lineCap: 'round',   //折線兩端線帽的繪制樣式，默認值為'butt'無頭，其他可選值：'round'圓頭、'square'方頭
        zIndex: 50,       //折線覆蓋物的疊加順序。默認疊加順序，先添加的線在底層，后添加的線在上層。通過該屬性可調整疊加順序，使級別較高的折線覆蓋物在上層顯示默認zIndex：50、
      })
      // 將折線添加至地圖實例
      this.map.add(this.path);
    },

上面需要注意的地方是繪制折線和添加marker標記的時候，可以設置position和path的值為空，這樣進來的時候就不會在地圖上創建一個標記了

this.marker = new AMap.Marker({
         position: null
      })

最后在ajax請求接口獲取到數據后動態繪制路線軌跡

if(res.code==2000){
// 歷史路徑經緯度集合
            let trackPath = []
            this.list.forEach((item,index) => {
              trackPath.push(new AMap.LngLat(item.lng,item.lat))
            });
            this.path.setPath(trackPath)
            this.path.show()

            // 將最后一條記錄添加marker標記
            let lastTrack = new AMap.LngLat(this.list[0].lng,this.list[0].lat)
            this.map.setCenter(lastTrack)
            this.marker.setPosition(lastTrack)
            this.marker.show()
}