vue地图规划

<template>
  <div id="container"></div>
  <div id="panel"></div>
 
  <div style="position: fixed; top: 0; width: 100vw">
    <van-nav-bar
      title="地图"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
  </div>
</template>
 
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "6763cff122c833d26aa962ad2f433965",
  };
 
  AMapLoader.reset();
  AMapLoader.load({
    key: "5df7186e05e3aa7217ee42921b20dd31", // 申请好的Web端开发者Key
    version: "2.0", // 指定要加载的JSAPI版本
    plugins: ["AMap.Scale", "AMap.Driving"], // 确保加载了AMap.Driving插件
  })
    .then((AMap) => {
      // 创建地图实例
      map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923], // 地图中心点
        zoom: 13, // 地图显示的缩放级别
      });
 
      // 确保插件已正确加载
      AMap.plugin(["AMap.Driving"], function () {
        try {
          var driving = new AMap.Driving({
            map: map,
            //   panel: "panel"
          });
 
          // 使用起终点名称规划驾车导航路线
          driving.search(
            [
              { keyword: "河南省新乡市智慧岛园区" },
              { keyword: "河南省新乡市五龙山动物园" },
            ],
            function (status, result) {
              if (status === "complete") {
                console.log("绘制驾车路线完成");
              } else {
                console.error("获取驾车数据失败：", result);
              }
            }
          );
        } catch (e) {
          console.error("Driving constructor error: ", e);
        }
      });
    })
    .catch((e) => {
      console.log("AMapLoader load error:", e);
    });
});
 
onUnmounted(() => {
  if (map) {
    map.destroy();
  }
});
 
onUnmounted(() => {
  map?.destroy(); // 组件卸载时销毁地图实例
});
 
const onClickLeft = () => history.back(); // 返回按钮的点击事件，返回到上一个页面
</script>
 
<style scoped>
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
 
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
 
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
 
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>