vue中使用高德地图路线规划

<template>
  <div class="map-content">
    <div class="page" id="map-container"></div>
    <div id="panel"></div>
  </div>
</template>
<script>
import AMap from "AMap";
export default {
  name: "Amap",
  data() {
    return {
      map: null,
      parms: {
        start: {
          latitude: 29.50674,
          longitude: 121.82831,
        },
        end: {
          latitude: 29.974115,
          longitude: 121.311381,
        },
      },
    };
  },
  mounted() {
    this.init(this.parms);
  },
  methods: {
    gaodeClick(params) {
      this.init(params);
    },
    destroy() {
      this.map && this.map.destroy(); // 销毁地图
     $("#panel").empty() ;
    },
    init(params) {
     this.destroy() ;
      // 地图初始化
      this.map = new AMap.Map("map-container", {
        resizeEnable: true,
        center: [params.start.longitude, params.start.latitude], // 地图中心点
        zoom: 16, // 地图显示的缩放级别   1-16 越大越详细
      });
      // 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺
      // 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)
      // 公交站点查询
      AMap.plugin([], () => {});
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Driving",
        ],
        () => {
          this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.Driving());
        }
      );
      // this.getRoute(); // 获取线路规划
      this.getDriving(params); // 驾车线路规划
    },
    /**
     * @description 驾车路线规划服务
     * 提供起、终点坐标的驾车导航路线查询功能。
     * 入参  起终点的经纬度
     */
    getDriving(params) {
      //构造路线导航类
      let _this = this;
      var driving = new AMap.Driving({
        map: this.map, // 工具挂载到那个对象
        panel: "panel",
      });

      // 根据起终点经纬度规划驾车导航路线
      driving.search(
        new AMap.LngLat(params.start.longitude, params.start.latitude),
        new AMap.LngLat(params.end.longitude, params.end.latitude),
        // new AMap.LngLat(116.379028, 39.865042),
        // new AMap.LngLat(116.427281, 39.903719),
        function (status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === "complete") {
            // log.success("绘制驾车路线完成");
          } else {
            // log.error("获取驾车数据失败：" + result);
          }
        }
      );
    },

    // 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
    getRoute() {
      new AMap.Transfer({
        map: this.map, // 工具挂载到那个对象
        panel: "panel", // 节点容器
      }).search(
        [
          { keyword: "宁波大学", city: "宁波" },
          { keyword: "宁波老外滩", city: "宁波" },
        ],
        function (status, data) {
          console.log(data);
        }
      );
    },
  },
};
</script>
<style  scoped>
.page {
  height: calc(100vh - 50px);
}
.map-content {
  position: relative;
}
#panel {
  position: absolute;
  top: 0;
  right: 0;
}
</style>

参考blog，感谢博主