高德js,绘制路线

效果图

首先,指路api
https://lbs.amap.com/demo/javascript-api/example/driving-route/plan-route-according-to-lnglat

    async initMap() {
      // 基本地图加载
      const map = new AMap.Map("container", {
        resizeEnable: true,
        center: [108.946726, 34.222857], // 地图中心点
        zoom: 13, // 地图显示的缩放级别
      });
  // 引入很重要
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.Transfer",
          "AMap.Geolocation",
          "AMap.StationSearch",
        ],
        () => {
          map.addControl(new AMap.ToolBar());
          map.addControl(new AMap.Scale());
          map.addControl(new AMap.Transfer());
          map.addControl(new AMap.Geolocation());
          map.addControl(new AMap.StationSearch());
        }
      );
      // 构造路线导航类
      const driving = new AMap.Driving({
        map: map,
        policy: AMap.DrivingPolicy.LEAST_TIME,
        // hideMarkers: true,
        panel: "panel",
      });


      const lats = this.list.map((item) => item.lngLat);
      const lagArr = (lats.length && lats[0]) || [];
      const startLngLat = [lagArr.lng, lagArr.lat];
      const latArr = (lats.length && lats[lats.length - 1]) || [];
      const endLngLat = [latArr.lng, latArr.lat];


      for (let index = 0; index < lats.length; index++) {
        const lastMarkerClass =
          index + 1 === lats.length ? " step-map-last" : "";
        var marker = new AMap.Marker({
          position: [lats[index].lng, lats[index].lat],
          content: `<div class="d-step-number${lastMarkerClass}">${
            index + 1
          }</div>`,
          offset: new AMap.Pixel(-13, -30),
        });
        marker.setMap(map);
      }
      driving.search(
        new AMap.LngLat(startLngLat[0], startLngLat[1]),
        new AMap.LngLat(endLngLat[0], endLngLat[1]),
        function (status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === "complete") {
            console.log("绘制路线完成");
          } else {
            console.log("获取路线失败：" + result);
          }
        }
      );
    },

// html里面
   <div id="container" />
    <div id="panel" />  // 必须要有,不然出来

最重要的是要在html里面引入绘制地图的js