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

先看最後實現的效果圖

高德地圖api文檔

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

使用

一、在index.html裏面引入高德地圖js文件

二、引入以後咱們就直接能夠在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()
}