vue 高德导航 轨迹查询，支持多条轨迹查询

效果图如下:

单个轨迹查询

 

 

 

多条轨迹查询

 

 

 

1.创建地图

<div class="mapBox">
      <div id="container" style="width:87vw;height:85vh" />
    </div>

2.创建自定义窗体 ，代码我放在最后面

import createInfoWindow from '@/utils/amap'

3.初始化

 data() {
    return {
      lineArr2: [[116.478935, 30.997761], [116.478939, 38.997825], [116.478912, 38.998549], [116.478912, 38.998549], [116.478998, 38.998555]],
      trackList: [],
      roundList: [],
      colorList: ['#e64545', '#3f57d0', '#d03fbe', '#773fd0', '#d03f75', '#3fa1d0', '#3fc9d0', '#b7b939', '#b98639', '#81ce06', '#083bf9', '#3e3b3b', '#d800ff'],
      winInfo: null
    }
  },

　　

4. 初始化地图

  initMap() {
      var that = this
      this.map = new AMap.Map('container', {
        resizeEnable: true, // 窗口大小调整
        center: [110.478935, 35.997761], // 中心 
        zoom: 5
      })
      // 添加工具栏
      this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
        // 工具条
        const toolbar = new AMap.ToolBar()
        // 比例尺
        const scale = new AMap.Scale()
        this.map.addControl(toolbar)
        this.map.addControl(scale)
      })
    },

 5.初始化轨迹

 initroad2(i) {
      const index = null
      if (i > this.colorList.length) {
        index = 1
      }
      // 绘制还未经过的路线
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.trackList[i].list,
        showDir: true,
        strokeColor: index ? this.colorList[i] : this.colorList[i], // 线颜色--蓝色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 7, // 线宽
        // strokeStyle: "solid"  //线样式
        lineJoin: 'round' // 折线拐点的绘制样式
      })

      this.map.add(this.polyline)
      // 绘制坐标的圆点
      const list = this.roundList[i]
      for (const x in list) {
        const center = list[x].center
        const icons = 'https://xxxxxx/icon/Marke.png'  // 绿色的圆形标记点
        const imageSize = new AMap.Size(40, 40) //标记点图标大小
        const sizes = new AMap.Size(40, 40) // 图标 容器大小
        const offset = new AMap.Pixel(-20, -40) // 图标偏移位置
        if (x == 0) {
          icons = 'https://xxxx/icon/qi.png'   //起点
        } else if (x == list.length - 1) {
          icons = 'https://xxxxxx/icon/zhong.png' //终点
        } else {
          icons = 'https://xxxxx/icon/Marker.png'  //绿色圆形标记点
          imageSize = new AMap.Size(16, 16)
          sizes = new AMap.Size(16, 16)
          offset = new AMap.Pixel(-5, -5)
        }
        this.circleMarker = new AMap.Marker({
          position: center,
          map: this.map,
          icon: icons,
          offset: offset,
          size: sizes,
          imageSize: imageSize
        })
        this.circleMarker.title = `<span>信息</span>`
        this.circleMarker.content = [
          '用户ID:' + list[x].info.i.userId,
          '机型:' + list[x].info.i.model,
          '更新时间：' + moment(parseInt(list[x].info.i.clientTime)).format('YYYY-MM-DD HH:mm:ss')
        ]
        this.circleMarker.on('click', this.markerClick)
        // this.circleMarker.emit('click', { target: this.circleMarker })
      }
      this.infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
        isCustom: true, // 使用自定义窗体
        content: this.winInfo
      })

      this.map.setFitView() // 合适的视口

    },

6.点击标记点

markerClick(e) {
      let content = e.target.content
      const self = this
      content = JSON.stringify(content)
      this.winInfo = JSON.parse(content)
      this.winTitle = e.target.title
      // 设置窗体内容
      this.infoWindow.setContent(
        createInfoWindow.createInfoWindow(
          self.winTitle,
          self.winInfo.join('<br/>'),
          function() {
            // 关闭窗体
            self.map.clearInfoWindow()
          }
        )
      )
      // 打开窗体
      self.infoWindow.open(self.map, e.target.getPosition())
    },

7 创建窗体 、打开窗体、关闭窗体

// 创建窗体
createInfoWindow() {
      const infoWindowData = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: this.$refs.infoData,
        offset: new AMap.Pixel(16, -45)
      })
      return infoWindowData
    },
    // 5.打开窗体
    openInfoWindow(infoWindow, marker) {
      infoWindow.open(this.map, marker.getPosition())
    },
    // 6.关闭窗体
    closeInfoWindow() {
      this.map.clearInfoWindow()
    },

　　

amap.js

// 高德导航 创建自定义窗体
function createInfoWindow(title, content, callback) {
  var info = document.createElement('div')
  info.className = 'custom-info input-card content-window-card'

  // 可以通过下面的方式修改自定义窗体的宽高
  info.style.width = '250px'
  // 定义顶部标题
  var top = document.createElement('div')
  // var titleD = document.createElement("div");
  var closeX = document.createElement('img')
  top.className = 'info-top'

  closeX.src = require('@/assets/close.png')
  closeX.onclick = callback

  // top.appendChild(titleD);
  top.innerHTML = title
  top.appendChild(closeX)
  info.appendChild(top)

  // 定义中部内容
  var middle = document.createElement('div')
  middle.className = 'info-middle'
  middle.style.backgroundColor = 'white'
  middle.innerHTML = content
  info.appendChild(middle)

  // 定义底部内容
  var bottom = document.createElement('div')
  bottom.className = 'info-bottom'
  bottom.style.position = 'relative'
  bottom.style.top = '0px'
  bottom.style.margin = '0 auto'
  info.appendChild(bottom)
  return info
}

export default {
  createInfoWindow
}

　　

窗体 css 

 >>> .input-card{
    background-color:rgba(000,000,000,0);

  }
  >>> .content-window-card {
       position: relative;
       box-shadow: none;
       bottom: 0;
       left: 0;
       width: auto;
       padding: 0;
     }

     >>>.content-window-card p {
       height: 2rem;
     }

    >>> .custom-info {
       /* border: solid 1px silver; */
     }

    >>> .info-top {
       position: relative;
       height: 30px;
       line-height: 30px;
       font-size: 14px;
       padding: 0 10px;
       background-color:#fdfdfd;
       border-bottom:1px #eee solid;
     }

     >>>.info-top span:nth-child(2) {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       width: 200px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       text-align: center;
     }

    >>> .info-top img {
       position: absolute;
       top: 8px;
       right: 10px;
       transition-duration: 0.25s;
       width: 15px;
     }

     >>> .info-top img:hover {
       box-shadow: 0px 0px 5px #000;
     }

     >>>.info-middle {
       background: #fdfdfd !important;
       font-size: 12px;
       padding: 10px 6px;
       line-height: 20px;
       color: #333;
     }

     >>>.info-bottom {
       height: 0px;
       width: 100%;
       clear: both;
       text-align: center;
       width: 0;
         height: 0;
         border-left: 5px solid transparent;
         border-right: 15px solid transparent;
         border-top: 20px solid #fdfdfd;
     }

     >>>.info-bottom img {
       position: relative;
       z-index: 104;
     }

     >>>.info-middle img {
       float: left;
       margin-right: 6px;
     }