规划路线(微信小程序、H5)

image.png

 

//地图
		getLocationDian(e1, e2) {
			console.log(e1, e2);
			let self = this;
			self.xx1 = [];
			self.xx2 = [];
			self.points = [];
			// self.markers=[]
			console.log(self.markers, '======>marks');

			// self.$jsonp(url, data).then(re => {
			// 	var coors = re.result.routes[0].polyline;
			// 	for (var i = 2; i < coors.length; i++) {
			// 		coors[i] = coors[i - 2] + coors[i] / 1000000;
			// 	}
			// 	coors.forEach((item, index) => {
			// 		if (index % 2 == 0) {
			// 			self.xx2.push(item);
			// 		} else {
			// 			self.xx1.push(item);
			// 		}
			// });

			// 	self.xx1.forEach((item, index) => {
			// 		self.points.push({
			// 			longitude: item,
			// 			latitude: self.xx2[index]
			// 		});
			// 	});
			// 	self.setDateByPoints(self.points);
			// });
			wx.request({
				url: 'https://apis.map.qq.com/ws/direction/v1/ebicycling', //仅为示例,并非真实接口地址。
				data: {
					from: e1,
					to: e2,
					key: '3MSBZ-BNLKA-BX7KR-C2UL7-PGYA3-2TFCU'
				},
				header: {
					'content-type': 'application/json' // 默认值
				},
				success: res => {
					console.log(res, 'cccccccc');
					self.xx1 = [];
					self.xx2 = [];
					self.points = [];
					// console.log(res.data.result.routes[0].polyline,909090);
					var coors = res.data.result.routes[0].polyline;
					for (var i = 2; i < coors.length; i++) {
						coors[i] = coors[i - 2] + coors[i] / 1000000;
					}
					// console.log(coors,'coors==================')
					coors.forEach((item, index) => {
						if (index % 2 == 0) {
							self.xx2.push(item);
						} else {
							self.xx1.push(item);
						}
					});
					self.xx1.forEach((item, index) => {
						self.points.push({
							longitude: item,
							latitude: self.xx2[index]
						});
					});
					self.setDateByPoints(self.points);
				}
			});
		},
		setDateByPoints(points) {
			console.log('setDateByPoints', points);
			let that = this;
			let color = '#ffd500';
			that.polyline = that.computePointsSpeed(points);
			console.log(that.polyline, '数据');
			if (!that.polyline.length) {
				that.polyline = [
					{
						points: points,
						color: color,
						arrowLine: true, //带箭头的线
						width: 8
					}
				];
			}
			// if (that.maxSpeed) {
			// 	that.maxSpeed.iconPath = '../../static/icon/address_icon.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`
			// 	};
			// }
			let start = points[0];
			let end = points[points.length - 1];
			start.id = 1;
			start.width = 35;
			start.height = 35;
			start.iconPath = '../../static/icon/address_icon.png';
			end.id = 3;
			end.width = 35;
			end.height = 35;
			end.iconPath = '../../static/icon/address_icon.png';
			console.log(start, '======>箭头');

			that.markers.push(start, end);
			this.setCenterPoint(start, end);
		},
		// 根据速度计算路线颜色
		computePointsSpeed(points) {
			let lineColor = '#0080FF';
			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);
				}
			}
			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;
		},
		// 地图中心点 (计算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.0;
			}
			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);
		},
<map id="map1" :longitude="longitude" :latitude="latitude" :markers="markers" :scale="scale" :polyline="polyline"></map>
markers: [
				{
					id: 1,
					latitude: 30.338206,
					longitude: 120.222305,
					iconPath: '../../static/icon/address_icon.png',
					width: '40',
					height: '40'
				},
				{
					id: 2,
					latitude: 30.348206,
					longitude: 120.222305,
					iconPath: '../../static/icon/address_icon.png',
					width: '40',
					height: '40'
				}
			], // 标记点集合
			latitude: '30.338206',
			longitude: '120.222305',
			scale: 12, // 地图缩放比例
			points: [],
			xx1: [],
			xx2: [],
			polyline: [
				{
					points: []
				}
			] //

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/58632.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

leaflet-uniapp 缩放地图的同时 显示当前缩放层级

记录实现过程&#xff1a; 需求为移动端用户在使用地图时&#xff0c;缩放地图的同时&#xff0c;可以获知地图此时缩放的级别。 效果图如下&#xff1a;此时缩放地图级别为13 map.on() 有对应的诸多行为 查看官网即可&#xff0c;这里根据需要为--zoomstart zoom zoomend 代…

AWS多账户单点登录 IAM Identity Center(AWS SSO)

需求场景 多个aws账户&#xff0c;登陆麻烦且不安全&#xff0c;SSO单点功能并且外部身份提供者 — 如果您要管理外部身份提供者&#xff08;IdP&#xff09;&#xff08;例如 Okta 或 Active Directory&#xff09;中的用户。 官方文档&#xff1a;https://docs.aws.amazon.c…

【无标题】云原生在工业互联网的落地及好处!

什么是工业互联网&#xff1f; 工业互联网&#xff08;Industrial Internet&#xff09;是新一代信息通信技术与工业经济深度融合的新型基础设施、应用模式和工业生态&#xff0c;通过对人、机、物、系统等的全面连接&#xff0c;构建起覆盖全产业链、全价值链的全新制造和服务…

1.Kubernetes

文章目录 KubernetesK8S概述作用为什么使用K8S主要功能Kubernetes 集群架构与组件总结&#xff1a; 核心组件Master组件Kube-apiserverKube-controller-managerKube-scheduler工作 配置存储中心etcd Node组件KubeletKube-Proxydocker 或 containerd 总结&#xff1a; 工作流程K…

【SpringBoot】有哪些优点+配置文件如何配置?

博主简介&#xff1a;想进大厂的打工人博主主页&#xff1a;xyk:所属专栏: JavaEE进阶 Spring 的诞⽣是为了简化 Java 程序的开发的&#xff0c;⽽ Spring Boot 的诞⽣是为了简化 Spring 程序开发 的。Spring Boot是一个开源的Java框架&#xff0c;用于快速构建应用程序和微服…

ansible常见模块的运用

ansible常见模块的运用 一&#xff1a;Ansible简介二&#xff1a;ansible 环境安装部署管理端安装 ansibleansible 目录结构配置主机清单配置密钥对验证 三&#xff1a;ansible 命令行模块1&#xff0e;command 模块在远程主机执行命令&#xff0c;不支持管道&#xff0c;重定向…

LNMP安装

目录 1、LNMP简述&#xff1a; 1.1、概述 1.2、LNMP是一个缩写词&#xff0c;及每个字母的含义 1.3、编译安装与yum安装差异 1.4、编译安装的优点 2、通过LNMP创建论坛 2.1、 安装nginx服务 2.1.1、关闭防火墙 2.1.2、创建运行用户 2.1.3、 编译安装 2.1.4、 优化路…

【C#学习笔记】引用类型(2)

文章目录 ObjectEqualsGetTypeToStringGetHashCode string逐字文本复合格式字符串字符串内插 StringBuilderStringBuilder 的工作原理StringBuilder提供的方法访问字符迭代字符查询字符 dynamic Object 支持 .NET 类层次结构中的所有类&#xff0c;并为派生类提供低级别服务。…

物理机是什么?有什么优势?可以上堡垒机吗?

你知道物理机是什么&#xff1f;有什么优势&#xff1f;可以上堡垒机吗&#xff1f;今天我们就来简单聊聊。 物理机是什么&#xff1f; 物理机是相对于虚拟机而言的对实体计算机的称呼。物理机提供给虚拟机以硬件环境&#xff0c;有时也称为“寄主”或“宿主”。 物理机有什么…

万界星空科技/免费开源MES系统/免费仓库管理

仓库管理&#xff08;仓储管理&#xff09;&#xff0c;指对仓库及仓库内部的物资进行收发、结存等有效控制和管理&#xff0c;确保仓储货物的完好无损&#xff0c;保证生产经营活动的正常进行&#xff0c;在此基础上对货物进行分类记录&#xff0c;通过报表分析展示仓库状态、…

软件设计师(六)结构化开发方法

结构化方法由结构化分析、结构化设计、结构化程序设计构成&#xff0c;它是一种面向数据流的开发方法。 分类说明结构化分析&#xff08;SA&#xff09;根据分解与抽象的原则&#xff0c;按照系统中数据处理的流程&#xff0c;用数据流图来建立系统的功能模型&#xff0c;从而…

7种有效安全的网页抓取方法,如何避免被禁止?

网页抓取是一种从互联网上抓取网页内容的过程&#xff0c;但在网络抓取种相信您也经常遇到障碍&#xff1f;尤其是做跨境业务的&#xff0c;在抓取国外的网站时更有难度。但我们站在您的立场上&#xff0c;提供七种有效的方法来进行网页抓取而不被阻止&#xff0c;最大限度地降…

python可以做哪些小工具,python可以做什么小游戏

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python可以做什么好玩的&#xff0c;python可以做什么小游戏&#xff0c;今天让我们一起来看看吧&#xff01; 最近有几个友友问我说有没有比较好玩的Python小项目来练手&#xff0c;于是我找了几个比较有意思的给他们&…

CUDA编程

银河系CUDA编程指南(3)——矩阵乘法的分块实现 银河系CUDA编程指南(3)——矩阵乘法的分块实现 - 知乎0 写在前面前面一节实现了一个朴素的GPU矩阵乘法&#xff0c;效果和使用cublas库差距极大。其中一个原因就是因为对全局存储器 ( global memory) 的访问。全局内存通常使用DR…

亚马逊关键词的作用有哪些?

亚马逊关键词在平台上扮演着重要的作用&#xff0c;涵盖了消费者、卖家和整个平台的多个方面&#xff1a; 1、消费者的作用&#xff1a; 帮助消费者快速找到所需商品&#xff1a;通过输入关键词&#xff0c;消费者可以迅速找到感兴趣的商品&#xff0c;节省时间和精力。 支持…

百分点科技跻身中国智慧应急人工智能解决方案市场前三

近日&#xff0c; 全球领先的IT市场研究和咨询公司IDC发布了《中国智慧应急解决方案市场份额&#xff0c;2022》报告&#xff0c;数据显示&#xff0c;2022年中国智慧应急整体市场为104亿元人民币。其中&#xff0c;智慧应急人工智能解决方案子市场备受关注&#xff0c;百分点科…

day1-牛客67道剑指offer-JZ4 JZ6 JZ7 JZ9 JZ11 JZ69 JZ70 替换空格 斐波那契数列及其变形 左移/右移运算符

文章目录 1. JZ4 二维数组中的查找暴力法右上角往左下角逼近二分查找-左闭右开区间 2. 替换空格3. JZ6 从尾到头打印链表4. JZ7 重建二叉树思路1哈希加速 5. JZ9 用两个栈实现队列6. JZ11 旋转数组的最小数字常规遍历二分法 7. 斐波那契数列动态规划递归 8. JZ69 跳台阶动态规划…

PS - Photoshop 实现涂抹功能 (橡皮擦、图章、吸管、画笔)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/131997323 在 Photoshop 中&#xff0c;橡皮擦工具&#xff0c;以及吸管工具和画笔工具可以配合使用&#xff0c;实现涂抹功能&#xff0c;再通过…

AMEYA360:瑞萨电子MCU和MPU产品线将支持Microsoft Visual Studio Code

全球半导体解决方案供应商瑞萨电子宣布其客户现可以使用Microsoft Visual Studio Code&#xff08;VS Code&#xff09;开发瑞萨全系列微控制器&#xff08;MCU&#xff09;和微处理器&#xff08;MPU&#xff09;。瑞萨已为其所有嵌入式处理器开发了工具扩展&#xff0c;并将其…

zookeeper入门学习

zookeeper入门学习 zookeeper应用场景 分布式协调组件 客户端第一次请求发给服务器2&#xff0c;将flag值修改为false&#xff0c;第二次请求被负载均衡到服务器1&#xff0c;访问到的flag也会是false 一旦有节点发生改变&#xff0c;就会通知所有监听方改变自己的值&#…