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

news2024/11/16 23:59:44

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: []
				}
			] //

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023-08-03 LeetCode每日一题(删除注释)

2023-08-03每日一题 一、题目编号 722. 删除注释二、题目链接 点击跳转到题目位置 三、题目描述 给一个 C 程序&#xff0c;删除程序中的注释。这个程序source是一个数组&#xff0c;其中source[i]表示第 i 行源码。 这表示每行源码由 ‘\n’ 分隔。 在 C 中有两种注释风…

pytorch实战-图像分类(一)(数据预处理)

目录 1.导入各种库 2.数据预处理 2.1数据读取 2.2图像增强 3.构建数据网络 3.1网络构建 3.2读取标签对应的名字 4.展示数据 4.1数据转换 4.2画图 5.模型训练 1.导入各种库 上代码&#xff1a; import os import matplotlib.pyplot as plt %matplotlib inline import nu…

Pytorch深度强化学习1-4:策略改进定理与贝尔曼最优方程详细推导

目录 0 专栏介绍1 贝尔曼最优方程2 贪心策略与策略改进3 策略迭代与价值迭代4 算法流程 0 专栏介绍 本专栏重点介绍强化学习技术的数学原理&#xff0c;并且采用Pytorch框架对常见的强化学习算法、案例进行实现&#xff0c;帮助读者理解并快速上手开发。同时&#xff0c;辅以各…

PHP正则绕过解析

正则绕过 正则表达式PHP正则回溯PHP中的NULL和false回溯案例案例1案例2 正则表达式 在正则中有许多特殊的字符&#xff0c;不能直接使用&#xff0c;需要使用转义符\。如&#xff1a;$,(,),*,,.,?,[,,^,{。 这里大家会有疑问&#xff1a;为啥小括号(),这个就需要两个来转义&a…

C++ 对象数组

**数组元素不仅可以是基本数据类型&#xff0c;也可以是自定义类型。**例如&#xff0c;要存储和处理某单位全体雇员的信息&#xff0c;就可以建立一个雇员类的对象数组。对象数组的元素是对象&#xff0c;不仅具有数据成员&#xff0c;而且还有函数成员。 因此&#xff0c;和基…

iframe跨域解决方案

在 Web 开发中&#xff0c;跨域是指在一个域&#xff08;例如&#xff0c;https://www.example.com&#xff09;的页面中请求了另一个域&#xff08;例如&#xff0c;https://api.example.com&#xff09;的资源&#xff0c;浏览器出于安全考虑会阻止这样的请求。为了解决 ifra…

C#实现旋转图片验证码

开发环境&#xff1a;C#&#xff0c;VS2019&#xff0c;.NET Core 3.1&#xff0c;ASP.NET Core 1、建立一个验证码控制器 新建两个方法Create和Check&#xff0c;Create用于创建验证码&#xff08;返回1张图片和令牌&#xff09;&#xff0c;Check用于验证&#xff08;验证图…

Json文件编辑功能

1 Json格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于 ECMAScript&#xff08;European Computer Manufacturers Association, 欧洲计算机协会制定的js规范&#xff09;的一个子集&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。…

Curve深陷安全事件,OKLink如何破局

出品&#xff5c;欧科云链研究院 作者&#xff5c;Matthew Lee 7月31号&#xff0c;Curve 在平台表示 Vyper 0.2.15 的稳定币池由于编译器的漏洞所以遭到攻击。具体因为重入锁功能的失效&#xff0c;所以黑客可以轻易发动重入攻击&#xff0c;即允许攻击者在单次交易中执行某…

【运维】在阿里云上搭建自己的图床,配合PicGo和Typora使用

本文将详细介绍如何在阿里云上搭建自己的图床&#xff0c;包括购买OSS服务、配置域名解析、创建OSS存储桶和设置图片上传规则等步骤。希望对您有所帮助&#xff01; 一、购买OSS服务 首先&#xff0c;我们需要在阿里云官网购买OSS(Object Storage Service)服务。OSS是阿里云提…

【Linux命令200例】cp用于复制文件和目录(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜…

《golang设计模式》第一部分·创建型模式-05-工厂方法模式(Factory Method)

文章目录 1 概述2.1 角色2.2 类图 2 代码示例2. 1 设计2.2 代码2.3 类图 3. 简单工厂3.1 角色3.2 类图3.3 代码示例3.3.1 设计3.3.2 代码3.3.3 类图 1 概述 工厂方法类定义产品对象创建接口&#xff0c;但由子类实现具体产品对象的创建。 2.1 角色 Product&#xff08;抽象产…

opencv-38 形态学操作-闭运算(先膨胀,后腐蚀)cv2.morphologyEx(img, cv2.MORPH_CLOSE, kernel)

闭运算是先膨胀、后腐蚀的运算&#xff0c;它有助于关闭前景物体内部的小孔&#xff0c;或去除物体上的小黑点&#xff0c;还可以将不同的前景图像进行连接。 例如&#xff0c;在图 8-17 中&#xff0c;通过先膨胀后腐蚀的闭运算去除了原始图像内部的小孔&#xff08;内部闭合的…

MacBook截取网页长图

第一步&#xff1a;⌘Command Option I 第二步&#xff1a;⌘Command Shift P 第三步&#xff1a; 红框内输入Capture full size screenshot&#xff0c;回车&#xff0c;长图会自动下载。

软考高项(六)项目管理概述 ★重点集萃★

&#x1f451; 个人主页 &#x1f451; &#xff1a;&#x1f61c;&#x1f61c;&#x1f61c;Fish_Vast&#x1f61c;&#x1f61c;&#x1f61c; &#x1f41d; 个人格言 &#x1f41d; &#xff1a;&#x1f9d0;&#x1f9d0;&#x1f9d0;说到做到&#xff0c;言出必行&am…

VR实景导航——开启3D可视化实景导航新体验

数字化时代&#xff0c;我们大家出门在外都是离不开各种导航软件&#xff0c;人们对导航的需求也越来越高&#xff0c;而传统的导航软件由于精度不够&#xff0c;无法满足人们对真实场景的需求&#xff0c;这个时候就需要VR实景导航为我们实景指引目的地的所在。 VR实景导航以其…

新一代开源流数据湖平台Apache Paimon入门实操-上

文章目录 概述定义核心功能适用场景架构原理总体架构统一存储基本概念文件布局 部署环境准备环境部署 实战Catalog文件系统Hive Catalog 创建表创建Catalog管理表查询创建表&#xff08;CTAS&#xff09;创建外部表创建临时表 修改表修改表修改列修改水印 概述 定义 Apache Pa…

【每日一题】—— C. Challenging Cliffs(Codeforces Round 726 (Div. 2))

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;每日一题 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日反刍 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓称…

SpringBoot 项目创建与运行

一、Spring Boot 1、什么是Spring Boot&#xff1f;为什么要学 Spring Boot Spring 的诞生是为了简化 Java 程序的开发的&#xff0c;而 Spring Boot 的诞生是为了简化 Spring 程序开发的。 Spring Boot 翻译一下就是 Spring 脚手架 盖房子的这个架子就是脚手架&#xff0c;…

【Linux】网络编程套接字

1 预备知识 1.1 IP地址 IP协议有两个版本&#xff0c;分别是IPv4和IPv6。没有特殊说明&#xff0c;默认都是IPv4对于IPv4&#xff0c;IP地址是一个四个字节32为的整数&#xff1b;对于IPv6来说&#xff0c;IP地址是128位的整数 我们通常也使用 “点分十进制” 的字符串表示IP…