高德地图路线规划途径点vue3

前言：在vue2中，需要安装vue-amap来进行操作，但是在vue3就不支持了，就用原生的amap来

1.安装amap-loader

   npm install @amap/amap-jsapi-loader

然后在到vue文件中引用

import AMapLoader from '@amap/amap-jsapi-loader'

2.创建地图容器并且添加东西

????在vue3中，高德地图的很多操作都局限于一个then()函数里面,可以通过提前方法来实现简化。

//可以写在方法，放在onMount里面
AMapLoader.load({
    "key": "d69*********************28",  // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    "plugins": 
    //组件引入，在这里面写自己需要的组件就行了
['AMap.PlaceSearch','AMap.Geolocation','AMap.ToolBar','AMap.Scale','AMap.GeoJSON','AMap.ControlBar','AMap.AutoComplete','AMap.Polyline','AMap.HawkEye','AMap.Driving',' AMap.PlaceSearch'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
      "version": '1.1',   // AMapUI 版本
      "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
      "version": '2.0'  // Loca 版本
    },
  }).then((AMap)=>{
  //创建一个地图容器，可以放在外面写
    map.value = new AMap.Map('container',{//是否为3D地图模式
      zoom:15,           //初始化地图级别
      center:[104.865284,31.58872], //初始化地图中心点位置
      mapStyle: 'amap://styles/normal',
      resizeEnable: true,
      viewMode: '3D',
    });
    ........
    下面是我们需要进行写的
   }
  }

3.路线规划组件

????首先我们需要在plugins里面去引用，就是那个数组里面，路线规划有很多种，如驾车路线规划，步行路线规划，公交路线规划，骑行路线规划，电动车路线规划。这里我就举例驾车路线规划，其他的几种都差不多的。

• 驾车路线规划：AMap.Driving
• 步行路线规划：AMap.Walking
• 骑行路线规划：AMap.Riding
• 公交路线规划：AMap.Transfer

????首先需要了解点位，路线规划可能需要点位，当我们有需求需要途径点的时候，就需要添加点位，如果需求只是起始点的话，那就不需要引入点位组件。
????下面是一个具体的例子，一个点位创建方法

const addMarker=(AMap,text,x,y,id)=>{
//创建点位图标
  const startIcon = new AMap.Icon({
    // 图标尺寸
    size: new AMap.Size(25, 34),
    // 图标的取图地址（这里可不能用本地相对路径）
    image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
    // 图标所用图片大小
    // imageSize: new AMap.Size(135, 40),
    // 图标取图偏移量
    imageOffset: new AMap.Pixel(5, 0)
  });
  //这是点位创建
   let marker= new AMap.Marker({
    position: new AMap.LngLat(x, y),
    offset: new AMap.Pixel(-13, -30),
    icon: startIcon, // 添加 Icon 图标 URL
    title: text,
  })
  //设置文本，就是图标下面的文字
  marker.setLabel({
    direction:'top',
    offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
    content: "<div class='info'>"+text+"</div>", //设置文本标注内容
  });
   marker.setExtData({id:id})
    return marker
}

????然后就是我们的路线规划组件，不过途径点在高德地图是有上限的，一条路线最多16个点，如果你的途径点比较多的话，就需要用几条路线拼接在一起。（比较坑的一点）

 const driving = new AMap.Driving({
       //高德自己的算法, 
       //驾车策略，包括 LEAST_TIME，LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
      policy: AMap.DrivingPolicy.LEAST_TIME,
      //这里的是地图容器实例，不要忘记value
      map:map.value,
      //结果列表的HTML容器id或容器元素，结果列表将在此容器中进行展示
      panel: "panel"
    })
    //上面只是创建而已
    //对应的参数，起始点，终点，途径点数组，反馈函数
    //起始点等点都是需要创建new AMap.LngLat(x, y),经纬度。
    driving.search(start,end,{waypoints:wayPoints}， function(status, result){
    
    }
    )

注意不要超出AMapLoader.load({…}）.then(){}这个then函数的外面。