关于vue使用高德地图vue-amap实现路径规划

安装

npm install vue-amap --save

key申请

https://lbs.amap.com/api/android-sdk/guide/create-project/get-key

在项目中配置高德地图

安装成功后在main.js设置以下内容

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '你的key',
  plugin: ['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder', 'AMap.DistrictSearch', 'AMap.InfoWindow'],
  v: '1.4.4',
  uiVersion: '1.0',
})

线路规划轨迹核心代码：高德地图官网

html代码：

<el-amap :amap-manager="amapManager" :events="events" :center="center" :zoom="zoom" :plugin="plugin" class="amap-demo" />

js代码：

import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager() // 新建生成地图画布

data(){
  return {
    map: null,
      amapManager,
      marker: null,
      events: {
       init(o) {
         lazyAMapApiLoaderInstance.load().then(() => {
           self.initMap()
         })
       },
     },
     center: [121.472644, 31.231706],
     zoom: 10,
     plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geocoder', 'AMap.Geolocation', 'AMap.InfoWindow'],
 }
}

AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
    if (!PathSimplifier.supportCanvas) {
      alert('当前环境不支持 Canvas！')
      return
    }
    // 设置数据
    self.pathSimplifierIns = new PathSimplifier({
      zIndex: 100,
      // autoSetFitView:false,
      map: self.map, // 所属的地图实例
      getPath: function (pathData, pathIndex) {
        return pathData.path
      },
      getHoverTitle: function (pathData, pathIndex, pointIndex) {
        // if (pointIndex >= 0) {
        //   return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
        // }
        return `
          总费用：${self.transferUnit(pathData.totalFee, 100, 2)}元

          总公里数：${self.transferUnit(pathData.totalDistance, 1000000, 2)}km

          总时效: ${self.transferUnit(pathData.totalTime, 60 * 24, 2)}天
        `
      },
      renderOptions: {
        pathLineStyle: {
          dirArrowStyle: true,
        },
        getPathStyle: function (pathItem, zoom) {
          var color = colors[pathItem.pathIndex % colors.length]
          var lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3))
          return {
            pathLineStyle: {
              strokeStyle: colors[i],
              lineWidth: lineWidth,
            },
            pathLineSelectedStyle: {
              lineWidth: lineWidth + 2,
            },
            pathNavigatorStyle: {
              fillStyle: colors[i],
            },
          }
        },
      },
    })
    window.pathSimplifierIns = self.pathSimplifierIns
    self.pathSimplifierIns.setData([
      {
        path: pathsArr[i].path,
        contractRouteCode: pathsArr[i].contractRouteCode,
        totalDistance: pathsArr[i].totalDistance,
        totalFee: pathsArr[i].totalFee,
        totalTime: pathsArr[i].totalTime,
      },
    ])
  })
}