规划路线(微信小程序、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/hcovertSpeed(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.mzph.cn/news/24520.shtml

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

相关文章

【Python】Locust持续优化:InfluxDB与Grafana实现数据持久化与可视化分析

目录 前言 influxDB 安装运行InfluxDB 用Python 上报数据到influxdb ocust 数据写入到 influx Locust的生命周期 上报数据 优化升级 配置Grafana 总结 资料获取方法 前言 在进行性能测试时&#xff0c;我们需要对测试结果进行监控和分析&#xff0c;以便于及时发现问…

HTML+CSS+JavaScript:渲染电商站购物车页面

一、需求 根据下图渲染购物车页面 二、代码素材 以下是缺失JS部分的代码&#xff0c;感兴趣的小伙伴可以先自己试着写一写 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatib…

政务云建设与应用解决方案[42页PPT]

导读&#xff1a;原文《政务云建设与应用解决方案[42页PPT]》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 完整版领取方式 完整版领取方式&#xff1a; 如需获取完…

ELF文件格式解析

ELF(Executable and Linkable Format) 即可执行可链接文件格式&#xff0c;是目前操作系统上最常见的可执行文件格式。不同系统的目标文件不一样&#xff0c;Windows是PE&#xff08;Portable Executable&#xff09;&#xff0c;linux是ELF&#xff08;Executable Linkable Fo…

【SpringCloud】RabbitMQ基础

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;…

vue2-diff算法

1、diff算法是什么&#xff1f; diff算法是一种通过同层的树节点进行比较的高效算法。 其有两个特点&#xff1a; 比较只会在同层级进行&#xff0c;不会跨层级进行。 在diff比较的过程中&#xff0c;循环从两边向中间比较。 diff算法在很多场景中都有应用&#xff0c;在vue中&…

Jmeter(一) - 从入门到精通 - 环境搭建(详解教程)

1.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序&#xff0c;被设计为用于测试客户端/服务端结构的软件(例如web应用程序)。它可以用来测试静态和动态资源的性能&#xff0c;例如&#xff1a;静态文件&#xff0c;Java Servlet,CGI Scripts,Java Object,数据库和FTP服务器…

Hadoop学习:深入解析MapReduce的大数据魔力(二)

Hadoop学习&#xff1a;深入解析MapReduce的大数据魔力&#xff08;二&#xff09; 3.3 Shuffle 机制3.3.1 Shuffle 机制3.3.2 Partition 分区3.3.3 Partition 分区案例实操3.3.4 WritableComparable 排序3.3.5 Combiner 合并 3.4 OutputFormat 数据输出3.4.1 OutputFormat 接口…

HttpServletRequest和HttpServletResponse的获取与使用

相关笔记&#xff1a;【JavaWeb之Servlet】 文章目录 1、Servlet复习2、HttpServletRequest的使用3、HttpServletResponse的使用4、获取HttpServletRequest和HttpServletResponse 1、Servlet复习 Servlet是JavaWeb的三大组件之一&#xff1a; ServletFilter 过滤器Listener 监…

医学图像处理

医学图像处理 opencv批量分片高像素图像病理图像色彩特征提取基于 imgaug、skimage 实现色彩增强基于 Cycle-GAN 完成染色标准化 病理图像细微特征提取自动数据标注分类场景下的医学图像分析分割场景下的医学图像分析检测场景下的医学图像分析 , i ] k 8 < * I opencv批量…

4.DNS和负载均衡

文章目录 coreDNS概念部署croeDNS测试 kubernetes多master集群结构master节点部署 负载均衡配置部署nginx做四层反向代理安装高可用 keepalivednginx监控脚本修改k8s中组件的配置文件 coreDNS 概念 coreDNS是kubernetes的默认DNS实现。可以为集群中的service资源创建一个资源名…

PyTorch中加载模型权重 A匹配B|A不匹配B

在做深度学习项目时&#xff0c;从头训练一个模型是需要大量时间和算力的&#xff0c;我们通常采用加载预训练权重的方法&#xff0c;而我们往往面临以下几种情况&#xff1a; 未修改网络&#xff0c;A与B一致 很简单&#xff0c;直接.load_state_dict() net ANet(num_cla…

Java课设--学生信息管理系统(例1)

文章目录 前提一、运行效果二、Text实现类三、Manage选择类四、StudentWay学生方法类五、StudnetSql数据库类 前题 例1为无使用GUI图形界面&#xff0c;例2使用GUI图形界面&#xff01; 首先自己的JDBC驱动已经接好了&#xff0c;连接自己的数据库没有问题。连接数据库可以看…

《吐血整理》高级系列教程-吃透Fiddler抓包教程(33)-Fiddler如何抓取WebSocket数据包

1.简介 本来打算再写一篇这个系列的文章也要和小伙伴或者童鞋们说再见了&#xff0c;可是有人留言问WebSocket包和小程序的包不会抓&#xff0c;那就关于这两个知识点宏哥就再水两篇文章。 2.什么是Socket&#xff1f; 在计算机通信领域&#xff0c;socket 被翻译为“套接字…

物联网||不一样的点灯实验(2)|通过使用CMSIS库函数实现点灯实验-学习笔记(12)

文章目录 通过使用CMSIS库函数实现点灯实验1 如何使用CMIS库2 如何利用CMSIS库操作IO 两种实现方法的比较课后作业:完整代码&#xff1a;LED.C:test.c:led.h:systick.h:systick.c: 通过使用CMSIS库函数实现点灯实验 1 如何使用CMIS库 #####如何使用此驱动#####[. .](#)启用GPI…

langchain-ChatGLM源码阅读:参数设置

文章目录 上下文关联对话轮数向量匹配 top k控制生成质量的参数参数设置心得 上下文关联 上下文关联相关参数&#xff1a; 知识相关度阈值score_threshold内容条数k是否启用上下文关联chunk_conent上下文最大长度chunk_size 其主要作用是在所在文档中扩展与当前query相似度较高…

RichTextBox基本用法

作用&#xff1a;富文本编辑器&#xff0c;支持多种文本展示 常用属性&#xff1a; 允许显示多行 自动换行 展示滚动条 ScrollBars属性值&#xff1a; 1、Both&#xff1a;只有当文本超过RichTextBox的宽度或长度时&#xff0c;才显示水平滚动条或垂直滚动条&#xff0c;或两…

基于粒子群优化算法的配电网光伏储能双层优化配置模型[IEEE33节点](选址定容)(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码、数据、讲解 &#x1f4a5;1 概述 由于能源的日益匮乏&#xff0c;电力需求的不断增长等&#xff0c;配电网中分布式能源渗透率不断提高&#xff0c;且逐渐向主动配电网方…

【雕爷学编程】Arduino动手做(184)---快餐盒盖,极低成本搭建机器人实验平台2

吃完快餐粥&#xff0c;除了粥的味道不错之外&#xff0c;我对个快餐盒的圆盖子产生了兴趣&#xff0c;能否做个极低成本的简易机器人呢&#xff1f;也许只需要二十元左右 知识点&#xff1a;轮子&#xff08;wheel&#xff09; 中国词语。是用不同材料制成的圆形滚动物体。简…

Mac端口扫描工具

端口扫描工具 Mac内置了一个网络工具 网络使用工具 按住 Command 空格 然后搜索 “网络实用工具” 或 “Network Utility” 即可 域名/ip转换Lookup ping功能 端口扫描 https://zhhll.icu/2022/Mac/端口扫描工具/ 本文由 mdnice 多平台发布