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

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总

实现步骤：

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"


### 常用的JavaScript设计模式

* 单体模式

* 工厂模式

* 例模式

  ![](https://img-blog.csdnimg.cn/20210616215753130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70)

  

### 函数

* 函数的定义

* 局部变量和全局变量

* 返回值

* 匿名函数

* 自运行函数

* 闭包

  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

  ![](https://img-blog.csdnimg.cn/20210616215826268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70)