vue3中使用高德地图进行轨迹绘制及播放

qq_54551471

于 2024-08-05 10:38:37 发布

阅读量1.5k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： vue3 高德地图文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_54551471/article/details/140920416

1、定义地图容器及操作按钮

 <div class="gaode-map">
    <div id="container"></div>
    <div class="option-btn">
      <el-button @click="handleStartDraw">开始绘制</el-button>
      <el-button @click="handleSave">保存路径</el-button>
      <el-button @click="handleMove">开始动画</el-button>
      <el-button @click="handlePause" v-if="!showStatus && start">暂停动画</el-button>
      <el-button @click="handleResume" v-if="showStatus && start">继续动画</el-button>
      <el-button @click="handleStop" v-if="start">停止动画</el-button>
    </div>
  </div>

2、引入高德地图，轨迹绘制及播放方法实现

<script setup>

import AMapLoader from '@amap/amap-jsapi-loader';
import {ref,onMounted,nextTick} from "vue";
const path = ref([]);
const current_position = ref([]);

let AMap = ref(null)
let map = ref(null)
let search = ref('')