vue3+高德地图api2.0 如何实现自定义点击事件方法成功的在initMap()内使用？

Question

const initMap = () => {
  AMapLoader.load({
    key: "859d5ecb09c62ff524ce665eb76f0543", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.TileLayer'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      const map = new AMap.Map("container", {
        center: [103.931945924, 30.743396984], //初始化地图中心点位置
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        layers: [new AMap.TileLayer.Satellite()],//设置地图图层为卫星地图
        zoom: 16, //初始化地图级别
      });
      //添加插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.TileLayer",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.MouseTool",
        ],
        function () {
          //异步同时加载多个插件
          map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
          map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
          // map.addControl(new AMap.HawkEye()); //显示缩略图
          // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
          // 以下是鼠标工具插件
          const mouseTool = new AMap.MouseTool(map);
          mouseTool.rule();// 用户手动绘制折线图,测量距离
          // mouseTool.measureArea(); // 测量面积
        });
      // 单击
      map.on("click", (e) => {
        console.log("单击", e);
        current_position.value = [e.lnglat.KL, e.lnglat.kT];
        path.value.push([e.lnglat.KL, e.lnglat.kT]);
        // 地图按照适合展示图层内数据的缩放等级展示
        // map.setFitView();
        // if (currentLayer === "satellite") {
        //   map.setLayers([new AMap.TileLayer.RoadNet()]);
        //   currentLayer = "roadnet";
        // } else {
        //   map.setLayers([new AMap.TileLayer.Satellite()]);
        //   currentLayer = "satellite";
        // }
      });
    })
    .catch((e) => {
      console.log(e);
    });
}

大佬们，1.请问如何通过后台返回的实时经纬度，进行轨迹线的实时显示呢？
2.如何实现自定义点击事件方法成功的在initMap()内使用？求指教。谢谢！