vue 高德地图 （行经路线）

先放图

data(){
	return{
	driving = null
	routeLineList = []
	}
}

getDispatchDetail() {
    // 清除老的行经路线
    if (this.driving) {
      this.driving.clear()
      this.map.remove(this.routeLineList) // 因为我在创建的时候重置了线的样式， 也要删除routeLineList
    }
    this.loadingDispatchList = true
    const lineColor = 'rgba(' + 255 + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + 1 + ')' // 随机线的颜色
    const { code, data }: any = await getUnassigntList({}) // 请求接口数据
    if (code === 1) {
      const plan = data.plan || {}
      plan.orderSets = data.orderSets || []
        if (plan.waybill_order_list.length > 1) { // 如果数组长度小于1，说明只有一个或者没有那就构不成线
          // 画 行经路线
          this.driving = new AMap.Driving({
            // map: map,
            // hideMarkers: true,
            // strokeColor: color,
            // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式,还有其他几种方式见Api文档
            policy: AMap.DrivingPolicy.LEAST_TIME
          })
          plan.waybill_order_list.map((item: any, index: any) => { // 便利所有的数据，让第一条数据和第二条数据画一条线，第二条和第三条数据画线，三和四划线...   以此类推
            if (plan.waybill_order_list.length !== index && item && item.receive_lat && item.receive_lng && plan.waybill_order_list[index + 1]) {
              this.drawMapLine(item.receive_lng, item.receive_lat, plan.waybill_order_list[index + 1].receive_lng, plan.waybill_order_list[index + 1].receive_lat, this.map, lineColor)
            }
          })
    }
    this.loadingDispatchList = false
  }

// start_x:起点的横坐标；
// start_y：起点的纵坐标；
// end_x:终点的横坐标；
// end_y:终点的纵坐标；
// map:实例化map（this.map）
// color:随机线的颜色
// 绘制路径
  drawMapLine(start_x: any, start_y: any, end_x: any, end_y: any, map: any, color: any) {
    map.plugin('AMap.Driving', () => {
      var start_xy = new AMap.LngLat(start_x, start_y)
      var end_xy = new AMap.LngLat(end_x, end_y)
      // 根据起终点经纬度规划驾车导航 路线
      this.driving.search(start_xy, end_xy, (status: any, result: any) => {
        if (status === 'complete') {
          if (result.routes && result.routes.length) {
            // 绘制第一条路线，也可以按需求绘制其它几条路线
            var path = this.parseRouteToPath(result.routes[0])
            // var startMarker = new AMap.Marker({
            //   position: path[0],
            //   icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
            //   map: map
            // })
            // var endMarker = new AMap.Marker({
            //   position: path[path.length - 1],
            //   icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
            //   map: map
            // })
            var routeLine = new AMap.Polyline({
              path: path,
              isOutline: true,
              outlineColor: '#ffeeee',
              borderWeight: 2,
              strokeWeight: 3,
              strokeColor: color,
              lineJoin: 'round'
            })
            routeLine.setMap(map)
            // 调整视野达到最佳显示区域
            // map.setFitView([startMarker, endMarker, routeLine])
            this.routeLineList.push(routeLine)
            console.log('绘制驾车路线完成')
          }
        } else {
          console.log('获取驾车数据失败：' + result)
        }
      })
    })
  }

  // 计算各个拐点位置
  parseRouteToPath(route: any) {
    var path = []
    for (var i = 0, l = route.steps.length; i < l; i++) {
      var step = route.steps[i]
      for (var j = 0, n = step.path.length; j < n; j++) {
        path.push(step.path[j])
      }
    }
    return path
  }