vue3 引入高德轨迹

在Vue 3中引入高德地图轨迹，你可以按照以下步骤进行操作:

1. 首先，你需要在项目中安装`vue-amap`库，你可以使用以下命令来安装:

   npm install vue-amap --save

2. 接下来，在你需要使用高德地图轨迹的组件中，你需要引入`vue-amap`并注册插件。你可以在组件的`<script>`标签中添加以下代码：

   import VueAMap from 'vue-amap';
   Vue.use(VueAMap);

3. 然后，在Vue的`main.js`文件中进行全局配置。你可以在`main.js`文件中添加以下代码：

   import VueAMap from 'vue-amap';
   Vue.use(VueAMap);

   VueAMap.initAMapApiLoader({
     key: '你的高德地图API密钥',
     plugin: ['AMap.Driving'], // 引入高德地图轨迹插件
     v: '1.4.15', // 高德地图API版本号
   });

4. 现在你可以在需要使用高德地图轨迹的组件中，使用`vue-amap`提供的指令来显示地图和轨迹了。例如，在你的组件模板中添加以下代码：

   <template>
     <div>
       <div id="map-container">
         <el-amap :zoom="13" :center="['经度', '纬度']">
           <el-amap-driving :hideMarkers="true" :autoFitView="true" :origin="'起点坐标'" :destination="'终点坐标'"></el-amap-driving>
         </el-amap>
       </div>
     </div>
   </template>

请确保将上述代码中的`经度`、`纬度`、`起点坐标`和`终点坐标`替换为你实际使用的数值。

通过上述步骤，你就可以在Vue 3中成功引入和使用高德地图轨迹了。记得替换代码中的相关参数，以适应你的项目需求。<span class="em">1</span>
#### 引用[.reference_title]
- *1* [在vue中高德地图引入和轨迹的绘制的实现](https://download.csdn.net/download/weixin_38746918/14906197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]