vue中使用腾讯地图api实现轨迹回放

最新推荐文章于 2024-08-26 15:10:48 发布

肚子腾

最新推荐文章于 2024-08-26 15:10:48 发布

阅读量1.4k

点赞数

分类专栏：地图文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_53663377/article/details/126326091

版权

本文介绍如何在Vue项目中结合ElementUI，利用腾讯地图API实现轨迹回放的功能。首先展示了实现效果，接着详细讲解代码的组织结构和关键部分，最后提醒在index.html静态文件中引入必要的地图API库。

摘要由CSDN通过智能技术生成

1.效果展示

2.代码模块

<template>
  <div class="map">
    <div class="content">
      <el-card>
        <div class="btnContainer">
          <button class="el-btn" @click="btn1">点击小车开始移动</button>
          <button class="btn2" @click="btn2">重置</button>
          <button class="btn3" @click="btn3">暂停</button>
          <button class="btn4" @click="btn4">恢复</button>
          <p class="limit">
            <input type="text" placeholder="请输入限制移动距离" />
            <button class="el-btn" @click="btn5">点击限制移动距离</button>
          </p>
          <div class="info">
            <p></p>
            <p>当前限制小车最大移动距离：0米</p>
            <p>当前小车行驶距离：0米</p>
            <p></p>
          </div>
        </div>
        <div id="container"></div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 初始化地图
      map: null,
      // 行驶距离
      path: [
        new TMap.LatLng(39.98481500648338, 116.30571126937866),
        new TMap.LatLng(39.982266575222155, 116.30596876144409),
        new TMap.LatLng(39.982348784165886, 116.3111400604248),
      ],
      // 中心位置
      center: null,
      // 是否移动
      isMoving: false,
      // 位置
      position: null,
      // 限制距离
      limitDistance: 0,
      // 图标
      marker: null,
      // 绘制目标地图
      polylineLayer: null,
    };
  },
  mounted() {
      // 初始化地图
      this.initMap();
      // 初始化全程长度及小车起始坐标
      this.initInfo();
      // 绘制目标地图
      this.polylineLayerFun();
      // 图标行驶
      this.markerFun();
  },
 methods: {
    // 初始化地图
    initMap() {
      this.center = this.path[0];
      this.map &