vue-amap 实现定位+跑步路程+跑步时间计算功能

<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,    // 表示运动的累计距离，单位是公里用于界面显示// path: [],    // 运动坐标数据speed: "00'00\"",    // 配速 calories: 0.0,  // 运动的消耗，单位千卡h:0,//定义时，分，秒，毫秒并初始化为0；m:0,s:0,ms:0,time:0, //时间定时器lux:0,//路线定时器ll:0,//定位定时器jl:0,//距离定时器str:'00:00:00',times:'', //统计共多少秒时间aa:0,sx:0,lines: [{path: [        //[120.02112, 36.24094]],strokeDasharray: [10, 10],strokeColor: "#FF33FF", //线颜色strokeOpacity: 1, //线透明度strokeWeight: 3, //线宽strokeStyle: "solid", //线样式events: {}}],plugin: [   //一些工具插件{pName: 'Geolocation',   //定位enableHighAcuracy: true,maximumAge: 2000,events: {init(o) {// o 是高德地图定位插件实例this.ll=setInterval(function(){o.getCurrentPosition((status, result) => {if (result && result.position) {self.lng = result.position.lng;             //设置经度self.lat = result.position.lat;             //设置维度self.center = [self.lng, self.lat];         //设置坐标self.loaded = true;                         //loadself.$nextTick();  var a =  self.lines[0].path.length;// console.log("a:"+a)if(a==0){self.lines[0].path.push([self.lng,self.lat]);}else if((self.lines[0].path[a-1][0]!=self.lng)||(self.lines[0].path[a-1][1]!=self.lat)){self.lines[0].path.push([self.lng,self.lat],);}}})},2000);o.getCurrentPosition((status, result) => {if (result && result.position) {self.lng = result.position.lng;             //设置经度self.lat = result.position.lat;             //设置维度self.center = [self.lng, self.lat];         //设置坐标self.loaded = true;                         //loadself.$nextTick();  }})}}},]}},activated: function() {this.getCase()},created: function () {this.time=setInterval(this.timer,50);// this.lux=setInterval(this.luxian,3000);this.jl=setInterval(()=>{if((this.aa+1)==this.lines[0].path.length){ // console.log("aa:"+this.aa)//console.log("path.length:"+this.lines[0].path.length)this.aa = this.lines[0].path.length;if( this.aa>=2){this.distance = this.juli( this.lines[0].path[this.aa-1][0], this.lines[0].path[this.aa-1][1], this.lines[0].path[this.aa-2][0], this.lines[0].path[this.aa-2][1]);this.miles = parseFloat(this.miles)+ parseFloat(this.distance);this.miles = parseFloat(this.miles).toFixed(2);if(this.miles!=0){var ss = (1/this.miles)*this.times;this.speed =this.toDub(parseInt(ss/60))+"'"+this.toDub(parseInt(ss%60))+"\"";this.calories = parseFloat(60*(this.times/3600)*8/this.miles*this.times/3600).toFixed(2);}}}},1000);},methods: {//把经纬度传到父组件sendlnglat (){ this.$emit('register', this.lng, this.lat)},mouseEnter(){this.ll =  setTimeout(()=>{this.showw = false;this.left = true;this.right = true;clearInterval(this.time);}, 3000);},con(){this.showw = true;this.left = false;this.right = false;this.time=setInterval(this.timer,50);clearTimeout(this.ll);},end(){if(this.miles<0.1){MessageBox.confirm('', { message: '当前活动距离过短，将不会记录成绩', title: '提示', confirmButtonText: '结束', cancelButtonText: '取消' }).then(action => { if (action == 'confirm') {     //确认的回调this.$router.push({path: '/footer/index'});clearInterval(this.time);}}).catch(err => { if (err == 'cancel') {     //取消的回调} });}else{MessageBox.confirm('', { message: '您的运动距离为'+this.miles+'千米是否确定结束运动?', title: '提示', confirmButtonText: '结束', cancelButtonText: '取消' }).then(action => { if (action == 'confirm') {     //确认的回调this.$router.push({path: '/footer/index'});clearInterval(this.time);}}).catch(err => { if (err == 'cancel') {     //取消的回调} });}},timer(){                //定义计时函数this.ms=this.ms+50;        //毫秒if(this.ms>=1000){this.ms=0;this.s=this.s+1;        //秒}if(this.s>=60){this.s=0;this.m=this.m+1;       //分钟}if(this.m>=60){this.m=0;this.h=this.h+1;        //小时}this.str =this.toDub(this.h)+":"+this.toDub(this.m)+":"+this.toDub(this.s);//统计共看了多少秒this.times=this.s + this.m*60 + this.h*3600 ;},toDub(n){  //补0操作if(n<10){return "0"+n;}else {return ""+n;}},// luxian(){//   this.path.push([this.lng,this.lat,this.lng,this.lat]);// },juli(lng1,lat1,lng2,lat2){var radLat1 = lat1*Math.PI / 180.0;var radLat2 = lat2*Math.PI / 180.0;var a = radLat1 - radLat2;var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));s = s *6378.137 ;// EARTH_RADIUS;s = Math.round(s * 10000) / 10000;return s;//return的距离单位为km}}
}
</script><style scoped>
.buleft{position:absolute;top: 80%;left: 3%;z-index: 100;font-size:1.6em;padding:0 2em;color: #fff;background-color: #26a2ff
}
.buright{position:absolute;top: 80%;right: 3%;z-index: 100;font-size:1.6em;padding:0 2em;color: #fff;background-color: #ef4f4f
}
.time {color: #fff;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.head{background-color: #fff;position: absolute;z-index: 100;top: 5%;left: 50%;width: 260px;height: 150px;margin-left: -130px;border-radius: 20%;display:flex;color: black;flex-direction:column;font-size: 20px;opacity:0.8;
}
.ceshi{background-color: #fff;position: absolute;z-index: 110;top: 130%;left: 50%;width: 200px;height: 150px;margin-left: -100px;border-radius: 20%;display:flex;color: black;flex-direction:column;font-size: 20px;opacity:1;
}
.head>div span,p{font-size: 13px;color:#aaa;
}
.head .under div{font-weight:bold;display: flex;flex-direction: column;justify-content: space-between;
}
.top{padding-top: 30px;
}
.under{display: flex;flex-direction:row;justify-content: space-between;
}
.gl{font-size:33px;font-weight: bold;
}
.jsun{background:#007aff;color:#fff;border:none;height:60px;font-size:1.6em;padding:0 2em;cursor:pointer;transition:300ms ease all;outline:none;position: absolute;z-index: 100;top: 80%;left: 50%;width: 260px;margin-left: -130px;
}
.jsun:hover{background:#fff;color:#007aff;
}
.jsun:before,.jsun:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background: #007aff;transition:400ms ease all;
}
.jsun:after{right:inherit;top:inherit;left:0;bottom:0;
}
.jsun:hover:before,.jsun:hover:after{width:100%;transition:3000ms ease all;
}
</style>

vue-amap 实现定位+跑步路程+跑步时间计算功能相关推荐

vue锚点定位（代码通用） - 总结篇
vue锚点定位(应用场景) 当前页面锚点跨页面锚点 hash模式下的锚点 history模式下的锚点应用前提:(重要的事情,说3+1遍) 任意场景.任意代码.任意框架都能对接! 都能采用! 都能 ...
鄂马赛记 | 跑步就跑步，跑什么马拉松？
这个五一节,除了猫在家里读了基本书,还参加了一场马拉松.马拉松在我的家乡鄂州市举办,是首次采用五城联动的方式,同时在湖北长江沿岸的五座城市鸣枪起跑,名曰长江超级半程马拉松. 鄂州市是一座小城市,虽然是 ...
vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
时间定位表达式－用于时间的加、减调整
在笔者开发的应用中,经常会遇到用户对数据有按照时间进行查询或监视的需求.用户对此类需求往往是希望可以输入一个已当前时间为准,向前回溯或向后延展一定时间的一个时间段.时间段可以是一天.一周.一个月,也可 ...
vue 百度地图 + 定位
vue 百度地图 + 定位 > 前提需要自己有百度的密钥,如没有可以去百度地图申请一.在主目录下的index.html引入js,例如: 二.在webpack.base.conf.js配置文件中 ...
php++仿网页版微信,vue+web端仿微信网页版聊天室功能
一.项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
用vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
高德地图 SDK集成定位地理编码搜索经纬度获取功能工具类
最近项目要集成高德地图,然后可以根据语音输入指令,进行定位和地理编码搜索功能,从而实现获取当前位置经纬度和根据地址获取经纬度的功能下载文件之只放了libs和主要代码文件 https://downlo ...

vue-amap 实现定位+跑步路程+跑步时间计算功能

vue-amap 实现定位+跑步路程+跑步时间计算功能相关推荐

最新文章

热门文章