uniapp 微信小程序实现运动轨迹、行车轨迹、历史轨迹、轨迹回放、不同速度有不同的路线颜色

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序实现运动轨迹、行车轨迹、历史轨迹、轨迹回放、不同速度有不同的路线颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先看效果

uniapp 微信小程序实现运动轨迹、行车轨迹、历史轨迹、轨迹回放、不同速度有不同的路线颜色

实现效果:

  1. 根据不同速度绘制不同颜色的轨迹
  2. 根据终点起点获取地图中心点,尽可能在屏幕内完全展示轨迹
  3. 获取最快的路段并显示
  4. 自定义点图标

实现步骤:

  1. map组件

view标签部分

<template>
	<view>
		<map id="map1" 
		:longitude="longitude"
		:latitude="latitude"
		:markers="markers" 
		:scale="scale"
		:polyline="polyline"
		:style="{height: height,width:width}"
		></map>
	</view>
</template>

js部分


<script>
export default {
	props: {
		height: {
			type: String,
			default: '100vh'
		},
		width: {
			type: String,
			default: '100%'
		},
		points: {
			type: Array,
			default() {
				return []
			}
		},
	},
	data() {
		return {
			maxSpeed: null, // 最快速度的点
			scale: 3, // 地图缩放比例
			markers: [], // 标记点集合
			polyline: [{  
				points: [],
			},], // 坐标点集合
			
			latitude: 39.806466,
			longitude: 98.226473,
			
			centerPoint: {
				latitude: 0,
				longitude: 0
			}, // 中间点
		}
	},
	watch: {
		points(e) {
			let that = this;
			if (that.points.length > 0) {
				that.setDateByPoints(that.points);
			}

		},
	},
	created: function () {
		let that = this;
		if (that.points.length > 0) {
			that.setDateByPoints(that.points);
		}
	},
	methods: {
		// 根据速度计算路线颜色
		computePointsSpeed(points) {
			let lineColor = '#ffd500'
			let list = []

			if (!points || !points.length) {
				return list
			}

			let lastArr = []
			let lastSpeed = 0
			for (let i = 0; i < points.length; i++) {
				let speed = this.covertSpeed(points[i].speed)
				if (!this.maxSpeed) {
					this.maxSpeed = points[i]
				} else {
					if (points[i].speed > this.maxSpeed.speed) {
						this.maxSpeed = points[i]
					}
				}
				if (i === points.length - 1 || !speed) {
					// 还剩最后一个不计入
					continue
				}
				let nextPoint = points[i + 1]
				let nextSpeed = this.covertSpeed(points[i + 1].speed)
				if (!nextSpeed) {
					continue
				}
				lastSpeed = speed
				if (!lastArr.length) {
					lastArr.push(points[i], nextPoint)
				} else {
					lastArr.push(nextPoint)
				}
				if (speed <= 20) {
					lineColor = '#ffd500'
					if (nextSpeed > 20) {
						// 清空
						list.push({
							points: lastArr,
							color: lineColor,
							arrowLine: true, //带箭头的线
							width: 8,
						})
						lastArr = []
					}
				}
				if (speed > 20 && speed <= 40) {
					lineColor = '#ff8800'
					if (nextSpeed <= 20 || nextSpeed > 40) {
						// 清空
						list.push({
							points: lastArr,
							color: lineColor,
							arrowLine: true, //带箭头的线
							width: 8,
						})
						lastArr = []
					}
				}
				if (speed > 40 && speed <= 60) {
					lineColor = '#ff5d00'
					if (nextSpeed <= 40 || nextSpeed > 60) {
						// 清空
						list.push({
							points: lastArr,
							color: lineColor,
							arrowLine: true, //带箭头的线
							width: 8,
						})
						lastArr = []
					}

				}
				if (speed > 60 && speed <= 80) {
					lineColor = '#ff4d00'
					if (nextSpeed <= 60 || nextSpeed > 80) {
						// 清空
						list.push({
							points: lastArr,
							color: lineColor,
							arrowLine: true, //带箭头的线
							width: 8,
						})
						lastArr = []
					}
				}
				if (speed > 80 && speed <= 100) {
					lineColor = '#ff3d00'
					if (nextSpeed <= 80 || nextSpeed > 100) {
						// 清空
						list.push({
							points: lastArr,
							color: lineColor,
							arrowLine: true, //带箭头的线
							width: 8,
						})
						lastArr = []
					}
				}
				if (speed > 100 && speed <= 120) {
					lineColor = '#ff2d00'
					if (nextSpeed <= 100 || nextSpeed > 120) {
						// 清空
						list.push({
							points: lastArr,
							color: lineColor,
							arrowLine: true, //带箭头的线
							width: 8,
						})
						lastArr = []
					}
				}
				if (speed > 120) {
					lineColor = '#ff1d00'
					if (nextSpeed <= 120) {
						// 清空
						list.push({
							points: lastArr,
							color: lineColor,
							arrowLine: true, //带箭头的线
							width: 8,
						})
						lastArr = []
					}
				}
			}
			this.centerPoint = points[Math.round(points.length / 2)]
			console.log("centerPoint", this.centerPoint)
			if (!list.length && lastArr.length) {
				list.push({
					points: lastArr,
					color: lineColor,
					arrowLine: true, //带箭头的线
					width: 8,
				})
			}
			return list
		},
		// 设置路线和点
		setDateByPoints(points) {
			let that = this;
			let color = "#ffd500"
			// 标记点集合
			that.polyline = this.computePointsSpeed(points)
			if (!that.polyline.length) {
				that.polyline = [{
					points: points,
					color: color,
					arrowLine: true, //带箭头的线
					width: 8,
				}]
			}
			if (that.maxSpeed) {
				that.maxSpeed.iconPath = '../../static/icon/map/flash.png'
				that.maxSpeed.width = 24
				that.maxSpeed.height = 24
				that.maxSpeed.id = 2
				that.maxSpeed.callout = {
					color: '#5d5d5d',
					fontSize: 14,
					borderRadius: 6,
					padding: 8,
					bgColor: '#fff',
					content: `极速 ${this.covertSpeed(this.maxSpeed.speed)} km/h`
				}
				that.markers.push(this.maxSpeed)
			}
			let start = points[0]
			let end = points[points.length - 1]
			start.id = 1
			start.width = 35
			start.height = 35
			start.iconPath = '../../static/icon/map/start.png'
			end.id = 3
			end.width = 35
			end.height = 35
			end.iconPath = '../../static/icon/map/end.png'
			that.markers.push(start, end);
			this.setCenterPoint(start, end)
		},
		// 地图中心点 (计算3个点的中心点)
		setCenterPoint(start, end) {
			this.longitude = (start.longitude + this.centerPoint.longitude + end.longitude) / 3
			this.latitude = (start.latitude + this.centerPoint.latitude + end.latitude) / 3
			let distance1 = this.getDistance(start.latitude, start.longitude, this.centerPoint.latitude, this.centerPoint.longitude)
			let distance2 = this.getDistance(this.centerPoint.latitude, this.centerPoint.longitude, end.latitude, end.longitude)
			const distance = Number(distance1) + Number(distance2)
			console.log('计算两点之间的距离', distance1, distance2, distance)
			if (distance < 200) {
				this.scale = 17
			}
			if (distance >= 200 && distance < 1000) {
				this.scale = 15
			}
			if (distance >= 1000 && distance < 5000) {
				this.scale = 13
			}
			if (distance >= 5000 && distance < 10000) {
				this.scale = 12
			}
			if (distance >= 10000 && distance < 15000) {
				this.scale = 11
			}
			if (distance >= 15000 && distance < 50000) {
				this.scale = 10
			}
			if (distance >= 50000 && distance < 200000) {
				this.scale = 8
			}
			if (distance > 200000) {
				this.scale = 5
			}
		},
		// 速度转换 m/s -> km/h
		covertSpeed(ms) {
			if (ms <= 0) {
				return 0.00
			}
			const kmh = ms * (60 * 60)
			return parseFloat(String(kmh / 1000)).toFixed(2)
		},
		// 计算两坐标点之间的距离
		getDistance: function (lat1, lng1, lat2, lng2) {
			let rad1 = lat1 * Math.PI / 180.0;
			let rad2 = lat2 * Math.PI / 180.0;
			let a = rad1 - rad2;
			let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
			let r = 6378137;
			return (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math
				.sin(b / 2), 2)))).toFixed(0)

		},

	},
}
</script>

points 数据格式


points:[
	{
		latitude: 22,
		longitude: 98, 
		speed: 6.4352341234, //speed m/s
	},
	{
		latitude: 22,
		longitude: 98, 
		speed: 6.4352341234, //speed m/s
	},
	{
		latitude: 22,
		longitude: 98, 
		speed: 6.4352341234, //speed m/s
	}
]

注意:由于小程序会不断更新迭代,源码和体验效果可能有一定的差异。

转载务必说明出处文章来源地址https://www.toymoban.com/news/detail-514109.html

到了这里,关于uniapp 微信小程序实现运动轨迹、行车轨迹、历史轨迹、轨迹回放、不同速度有不同的路线颜色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp运动课程健身打卡系统微信小程序

    考虑到实际生活中在我来运动管理方面的需要以及对该系统认真的分析,将系统分为小程序端模块和后台管理员模块,权限按管理员和用户这两类涉及用户划分。 (a) 管理员;管理员使用本系统涉到的功能主要有:首页、个人中心、用户管理、课程类别管理、运动课程管理、课

    2024年02月21日
    浏览(36)
  • uniapp微信小程序获取微信运动步数(保姆级教程)

    官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html 可以先了解一下,然后下载对应的解密文件 找到对应的解密语言版本,老师这里用的uniapp,只能选择node版 这里有具体的案例,可以参考一下,直接在代码中导入,在上面的getStepInfo方法中直接实例化

    2024年02月06日
    浏览(46)
  • 微信小程序原生使用map组件实现轨迹、多边形

    使用地图本身的map组件实现地图 初始化地图: map组件的属性 longitude 必须 Number 中心点经度 latitude 必须 Number 中心点纬度 scale 选填 Number 地图的缩放级别(缩放切换时使用) include-points 选填 Array. 缩放视野以展示所有坐标点 markers 选填 Array. 地图展示的坐标点集合 polyline 选填

    2024年02月03日
    浏览(54)
  • 微信小程序校园运动场地预约系统设计与实现

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年02月04日
    浏览(47)
  • 基于Springboot+Mybatis+微信小程序实现小型运动管理平台

    此文主要功能包括:运动健康平台登录注册、了解健康知识、查看管理运动的文章与详情、每日登录打卡、系统通知、留言管理、提交运动功能。使用Java作为后端语言进行支持,界面友好,开发简单。 2.1、下载安装IntelliJ IDEA(后端语言开发工具),Mysql数据库,微信Web开发者工

    2024年02月02日
    浏览(46)
  • 基于php微信小程序运动场地预约系统设计与实现

    开发概要 开发操作系统:windows10 + 4G内存 + 500G 小程序开发:微信开发者工具(MINA框架) 后台环境:IIS +PHP 后台开发语言:PHP 后台开发工具:Dreamweaver +PhpStorm 数据库:mysql8 数据库管理工具:navicat 其他开发语言:html + css +javascript

    2024年02月11日
    浏览(52)
  • 微信小程序毕业设计作品成品(07)微信小程序校园体育馆运动场地预约系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(48)
  • 基于微信小程序的跑步运动计划小程序设计与实现

    💗博主介绍:✌全网粉丝10W+,CSDN全栈领域优质创作者,博客之星、掘金/华为云/阿里云等平台优质作者。 👇🏻 精彩专栏 推荐订阅👇🏻 计算机毕业设计精品项目案例(持续更新) 🌟 文末获取源码+数据库+文档 🌟 感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及

    2024年01月23日
    浏览(45)
  • 基于JSP微信小程序校园运动会报名系统设计与实现

    【后台管理员功能】 录入资讯:录入资讯标题、内容等信息 管理资讯:查看已录入资讯列表,支持删除和修改 会员列表:查看所有注册会员信息,支持删除 广告设置:上传图片和设置小程序首页轮播图广告地址 留言列表:所有用户留言信息列表,支持删除 录入比赛项目:

    2024年02月12日
    浏览(51)
  • 基于微信小程序的高校运动会管理系统设计与实现

    💗博主介绍:✌全网粉丝10W+,CSDN全栈领域优质创作者,博客之星、掘金/华为云/阿里云等平台优质作者。 👇🏻 精彩专栏 推荐订阅👇🏻 计算机毕业设计精品项目案例(持续更新) 🌟 文末获取源码+数据库+文档 🌟 感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及

    2024年01月20日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包