uniapp 微信小程序实现运动轨迹、行车轨迹、历史轨迹、轨迹回放、不同速度有不同的路线颜色_微信小程序 步数地图轨迹(1)

最新推荐文章于 2024-07-10 18:14:48 发布
最新推荐文章于 2024-07-10 18:14:48 发布
阅读量898 收藏 5
点赞数 3
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84616922/article/details/138932107
版权

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇
  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

	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)

	},

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇
  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

871)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇
  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

[外链图片转存中…(img-HMlCEojj-1715796308872)]

2401_84616922
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
腾讯地图、微信小程序、轨迹、路线图、marker标记点
05-27
首先申请腾讯地图key 配置安全域名 详细效果微信搜索小程序【城市科技行】查看
微信小程序实现轨迹回放的示例代码
10-15
主要介绍了微信小程序实现轨迹回放的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp实现天地图实时定位巡查、轨迹绘制功能，以及注意点
最新发布
m0_67790636的博客
07-10 1579
大家应该都知道，现在这三大地图运营商(高德、百度、腾讯)的商业授权是收费的，全国统一标准 5万/年，所以你想在uniapp中使用地图组件（map），或者使用gcj02 坐标系都是要先给人家钱的，本来我们公司也用了高德地图，奈何甲方没钱了，不愿意一年交5万块钱了，哎，就得把我们公司后台，以及app所有有关高德地图的东西换成天地图，因为天地图是免费的,开源的，地址（）这么倒霉事就落在我头上~。
uniapp 微信小程序实现运动轨迹、行车轨迹、历史轨迹、轨迹回放、不同速度有不同的路线颜色
热门推荐
Yarnk的博客
04-21 1万+
先看效果 （欢迎扫码体验） 实现效果： 根据不同速度绘制不同颜色的轨迹 根据终点起点获取地图中心点，尽可能在屏幕内完全展示轨迹 获取最快的路段并显示 自定义点图标 实现步骤： map组件 view标签部分 <template> <view> <map id="map1" :longitude="longitude" :latitude="latitude" :markers="markers" :scale="scale" :poly
微信小程序实现活动轨迹回放
King博客
04-10 1万+
前言 本文介绍使用组件map和API的MapContext+wx.getLocation来实现活动轨迹回放。 最终效果： 实现过程 1. 文件index.wxml代码如下，这一块比较简单，可自行查看，不做过多分析： <!--index.wxml--> <view class="container"> <map id="map" longitude=...
uniapp微信小程序定位跑步的实现
qq_73999886的博客
04-29 838
使用uniapp实现了简单的校园跑小程序
uniapp 根据定位实现地图绘制轨迹
qq_47255575的博客
11-14 5423
uniapp 地图绘制线和标记点
Uniapp实现微信小程序跑步运动轨迹、历史轨迹和轨迹回放等功能
u014791094的博客
08-04 8542
“跑跑步”是一款基于Uniapp开发的微信小程序，主要实现了跑步轨迹记录、历史轨迹、轨迹纠偏、轨迹回放和轨迹排名等功能。室内跑步记录正在开发，还没有发布，主要利用手机加速度传感器实现计步功能。
uni-app map路线轨迹回放功能及turf.js实现缓冲区渲染（微信小程序）
qq_39891453的博客
09-20 4815
uni-app map路线轨迹回放功能
微信小程序绘制地图轨迹线路
u014388322的专栏
12-07 5859
绘制轨迹的话需要拿到坐标点，获取到坐标点之后再地图上进行绘制就可以；布局文件：js文件：在实现轨迹绘制的时候需要的数据1：起点的坐标数据和icon2：终点的坐标数据和icon3：绘制线路的坐标数据集合实现代码：
uniapp 地图行车轨迹
weixin_44167504的博客
02-29 1275
id: number-必填,latitude: '纬度',longitude: '经度',callout:{},// '自定义标记点上方的气泡窗口'- 纯文本内容 - content 显示标记内容customCallout:{},// '自定义气泡窗口' - 自定义窗口内容 - 使用cover-view覆盖uniapp map自定义气泡窗。
uniapp 微信小程序tabbar凸起的显示
08-25
`uniapp`是一个跨平台的开发框架，它允许开发者使用一套代码库来构建多端应用，包括微信小程序。在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的...
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
基于uniapp微信小程序我的钱包页面
03-26
7. **微信小程序特有功能**：利用uniapp的微信小程序适配层，可以调用微信小程序的原生能力，如微信支付（wx.requestPayment）等，实现更丰富的功能。 8. **样式设计**：uniapp支持CSS3和uni.css，可以对页面进行...
uniapp实现轨迹回放
RemindingMe的博客
04-11 1564
实现效果，微信小程序上可以出现移动效果。
小程序 历史轨迹回放 地图播放历史轨迹
weixin_42729938的博客
08-24 798
小程序 历史轨迹回放 地图播放历史轨迹
小程序地图根据位置信息实时导航规划路线
qq_41206597的博客
05-03 1061
wx.startLocationUpdate 开启实时定位 再通过onLocationChange进行监听就可以实现实时定位功能。首先用到的API有两个。
uniapp实现轨迹polyline和标记点markers最终实现效果
RemindingMe的博客
04-12 5534
uniapp使用map实现显示轨迹和自定义标记内容。
uniapp实现地图轨迹回放
chinahcp2008的博客
02-21 8827
<template> <view> <map v-if="polyline[0].points.length > 0" id="myMap" :markers="markers" :polyline="polyline" :include-points="polyline[0].points" :latitude="polyline[0].points[0].latitude" :longitude="polyline[0]
uniapp 微信小程序实现车辆轨迹回放
03-13
我可以回答这个问题。要实现车辆轨迹回放，可以使用uniapp和微信小程序的API来获取车辆的位置信息，并将这些位置信息存储在数据库中。然后，使用地图API来绘制车辆的轨迹，并在地图上显示车辆的位置。最后，使用动画效果来实现轨迹回放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值