uniapp微信小程序定位跑步的实现

最新推荐文章于 2024-09-27 07:09:42 发布

猫头瑛

最新推荐文章于 2024-09-27 07:09:42 发布

阅读量1.5k

点赞数 17

文章标签： uni-app 微信小程序小程序

本文链接：https://blog.csdn.net/qq_73999886/article/details/138313345

版权

本文介绍了如何利用微信小程序的API开发一个校园跑应用，包括使用`wx.getLocation`获取用户位置、绘制运动轨迹、实时计算速度等功能，并设置了定时器以控制更新频率。

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

最近写了一个类似校园跑小程序，分享一下

效果如下：

先附上完整代码：

<template>
	<view class="text-area">
		<!-- <button @tap="getwz">点我获取当前位置</button> -->
		<map class="map" :longitude="longitude" :latitude="latitude" :markers="marker" :polyline="polyline"></map>
		<view class="block">
			<view class="but" @click="startRun" :class="{ 'run-flag-active': runFlag }">
				{
  { content }}
			</view>
			<view class="msg">
				<view class="speed">
					平均速度：{
  {speed}} m/s
				</view>
				<view class="kilo">
					公里：{
  {kilo}} km
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				longitude: 107.701594,
				latitude: 29.615453,
				marker: [],
				polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
					points: [{
						longitude: 107.701594,
						latitude: 29.615453
					}, {
						longitude: 107.70048,
						latitude: 29.617
					}],
					color: "#0000AA", //线的颜色
					width: 1, //线的宽度
					// 　　　　dottedLine:true,//是否虚线
				}],
				// 跑步标致,为true时停止跑步
				runFlag: true,
				content: "开始运动",
				speed: 0,
				kilo: 0,
				startTime: null, // 运动开始时间
				totalElapsedTime: 0, // 累计行驶时间（单位：秒）

			}
		},
		onLoad() {
			var that = this
			wx.authorize({
				scope: 'scope.userLocation',
				success(res) {
					console.log(res)
					if (res.errMsg == 'authorize:ok') {
						wx.getLocation({
							type: 'gcj02',
							success(res) {
								console.log(res) //此时里面有经纬度
								// 设置中心点位
								that.longitude = res.longitude;
								that.latitude = res.latitude;
								// 添加至标记点位
								that.marker.push({
									id: 0, // 保证ID唯一
									longitude: res.longitude,
									latitude: res.latitude,
									iconPath: '../../static/img/map/marker_checked.png',
									rotate: 0,
									width: 10,
									height: 20,
									title: '当前位置',
								});
							}
						})
					}
				},
				fail(err) {
					console.log(err)
				}
			})
		},
		methods: {
			getwz() {
				var that = this
				wx.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					highAccuracyExpireTime: 3500,
					success(res) {
						console.log(res);
						// 设置中心点位
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						// 修改标记点位
						that.marker[0].longitude = res.longitude;
						that.marker[0].latitude = res.latitude;
						// 加入轨迹折线
						that.polyline[0].points.push({
							longitude: res.longitude,
							latitude: res.latitude,
						});

						/

最低0.47元/天解锁文章