vue3 使用高德地图实现线路规划功能

1.引入百度api值public文件夹index.html
2.安装依赖

npm install @amap/amap-jsapi-loader

3. 获取 key 值。
4. 注册高德账号，注册成功后登录，然后 添加 key 值。复制添加后的 Key 值到组件，就可以使用了。

5.引入组件

import AMapLoader from "@amap/amap-jsapi-loader";

function getadress() {
  window._AMapSecurityConfig = {
    securityJsCode: "f902f26ff2a29756cf51384dda1ec0eb",
  };
  let startLngLat = ref('')
  AMapLoader.load({
    key: "24f840a20d3c6782254aa2fa03a2a8e0", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的插件列表
  }).then((AMap) => {
    // 初始化地图
    map.value = new AMap.Map('dwmap', {
      viewMode: "3D", // 是否为3D地图模式
      zoom: 18, // 初始化地图级别
      center: [106.535698, 29.565219], // 初始化地图中心点位置
    });



    let that = this;
    AMap.plugin("AMap.Geolocation", () => {
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
      });


      geolocation.getCurrentPosition(function (status, result) {
        console.log("status, result", status, result);
        if (status === "complete") {
          console.log("成功:", JSON.stringify(result.position));
          startLngLat.value = result.position
          // //引入和创建驾车规划插件 这个是高德地图，手机获取位置时很精准
          AMap.plugin(["AMap.Driving"], function () {
            const driving = new AMap.Driving({
              map: map.value,
              panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>
            });



            const endLngLat = [106.535698, 29.565219] //终点坐标
            //获取起终点规划线路
            driving.search(startLngLat.value, endLngLat, function (status, result) {
              if (status === "complete") {
                //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
                //查询成功时，result 即为对应的驾车导航信息
                console.log(result);
              } else {

              }
            });
          });
        } else {
          // console.log("获取驾车数据失败：" + result);
          API.get_map().then(res => {
            let rectangle = res.data.data.rectangle
            console.log(rectangle);
            const afterSemicolon = res.data.data.rectangle.split(';')[1];
            const coordinates = afterSemicolon.split(',').map(coord => parseFloat(coord));
            console.log(coordinates);
            AMap.plugin(["AMap.Driving"], function () {
              const driving = new AMap.Driving({
                map: map.value,
                panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>
              });



              const endLngLat = [106.535698, 29.565219] //终点坐标
              //获取起终点规划线路
              driving.search(coordinates, endLngLat, function (status, result) {
                if (status === "complete") {
                  //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
                  //查询成功时，result 即为对应的驾车导航信息
                  console.log(result);
                } else {

                }
              });
            });
          })
        }
      });
    });



  }).catch((e) => {
    console.log(e);
  });








}

3.加上销毁事件

onUnmounted(() => {
  map.value?.destroy();
});

最终效果