vue-amap 实现定位+跑步路程+跑步时间计算功能_vue通过直线距离算行驶时间-优快云博客

本文链接：https://blog.youkuaiyun.com/Jadeyqc/article/details/100101111

本文介绍了如何使用Vue组件库vue-amap，结合高德地图API，实现网页上的定位功能，并详细讲解了如何绘制跑步路程轨迹，以及计算跑步所用时间的实现步骤和关键代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="time">
    <div class="head">
     <div class="top">
          <div class="gl">{
  {miles}}<span>公里</span></div><br>
      </div>
      <div class="under">
           <div class="one">{
  {speed}}<p>平均配速</p></div>
           <div>{
  {str}}<p>用时</p></div>
           <div>{
  { calories}}<p>热量（千卡）</p></div>
      </div>
     </div>
    <el-amap 
        vid="amap"  
        :zoom="zoom"  
        :plugin="plugin" 
        class="amap-demo" 
        :center="center"
    >  
      <el-amap-bezier-curve v-for="line in lines"  :key="line" :v-model="lines" :path="line.path" :stroke-color="line.strokeColor" :stroke-style="line.strokeStyle" :events="line.events" :stroke-opacity="line.strokeOpacity"></el-amap-bezier-curve>  
    </el-amap>
      <button class="jsun"  @mouseenter="mouseEnter" v-if="showw">长按结束</button>
      <button class="buleft"   v-if="left" @click="con">继续</button>
      <button class="buright"  v-if="right" @click="end">结束</button>
  </div>
</template>

<script>
import { MessageBox, Button} from 'mint-ui'
export default {
  name: 'time',
   data() {
    let self = this;
    return {
      center: [121.59996, 31.197646],
      zoom: 19,
      lng: 0,
      lat: 0,
      loaded: false,
      visible: false,
      showw:true,
      left:false,
      right:false,
      year:"",
      month:"",
      date:"",
       distance: 0.0,  // 表示运动的累计距离
        miles: 0.0,    // 表示运动的累计距离，单位是公里用于界面