vue3高德地图鹰眼轨迹追踪

根据提供的引用内容，以下是使用Vue3和高德地图实现鹰眼轨迹追踪的步骤：

1. 在Vue项目中安装vue-amap插件：

npm install vue-amap --save

2. 在main.js中引入VueAMap并进行全局配置：

import Vue from 'vue'
import VueAMap from 'vue-amap'

Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'your_amap_api_key',
  plugin: ['AMap.Driving', 'AMap.ToolBar']
})

请注意替换`your_amap_api_key`为您自己的高德地图API密钥。

3. 在需要使用鹰眼轨迹追踪的组件中，使用`vue-amap`提供的`a-map`组件，并设置`plugin`属性为`AMap.Driving`和`AMap.ToolBar`：

<template>
  <div>
    <a-map :plugin="['AMap.Driving', 'AMap.ToolBar']" :zoom="13" :center="center">
      <a-marker :position="startPoint"></a-marker>
      <a-marker :position="endPoint"></a-marker>
      <a-driving :policy="AMap.DrivingPolicy.LEAST_TIME" :hideMarkers="false" :autoFitView="true" @complete="onDrivingComplete"></a-driving>
    </a-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: [116.397428, 39.90923], // 地图中心点坐标
      startPoint: [116.397428, 39.90923], // 起点坐标
      endPoint: [116.397428, 39.90923], // 终点坐标
    }
  },
  methods: {
    onDrivingComplete(result) {
      // 驾车路线规划完成后的回调函数
      console.log(result)
    }
  }
}
</script>

4. 在点击事件中获取起点坐标，并使用`AMap.DrivingRoute`进行路线规划：

map.addEventListener("click", function(e){
 var startPoint = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
  var endPoint = new AMap.LngLat(116.397428, 39.90923); // 公司坐标

  var driving = new AMap.DrivingRoute({
    map: map,
    panel: "results"
  });

  driving.search(startPoint, endPoint);
});

请注意替换起点和终点的坐标为您自己的坐标。