规划路线(微信小程序、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.rhkb.cn/news/75032.html

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

相关文章

Electron逆向调试

复杂程序处理方式&#xff1a; 复杂方式通过 调用窗口 添加命令行参数 启动允许调用&#xff0c;就可以实现调试发布环境的electron程序。 断点调试分析程序的走向&#xff0c;程序基本上会有混淆代码处理&#xff0c; 需要调整代码格式&#xff0c;处理程序。

ARM 常见汇编指令学习 9 - 缓存管理指令 DC 与 IC

文章目录 ARM64 DC 与 IC 指令 上篇文章&#xff1a;ARM 常见汇编指令学习 8 - dsb sy 指令及 dsb 参数介绍 ARM64 DC 与 IC 指令 AArch64指令集中有两条关于缓存维护&#xff08;cache maintenance&#xff09;的指令&#xff0c;分别是IC和DC。 IC 是用于指令缓存操作&…

数智保险 创新未来 | GBASE南大通用亮相中国保险科技应用高峰论坛

本届峰会以“数智保险 创新未来”为主题&#xff0c;GBASE南大通用携新一代创新数据库产品及金融信创解决方案精彩亮相&#xff0c;与国内八百多位保险公司高管和众多保险科技公司技术专家&#xff0c;就保险领域数字化的创新应用及生态建设、新一代技术突破及发展机遇、前沿科…

Git下:Git命令使用-详细解读

今天给大家讲一讲 Git常用命令的使用说明&#xff0c;希望本篇文章对大家有所帮助。 一、Git 安装 Git 的详细安装教程&#xff1a;见上一篇文章《Git上&#xff1a;Git安装教程》&#xff1a; Git上&#xff1a;全网最全最详细的Git安装教程&#xff0c;建议收藏保存 二、…

2023,谁在引领实时互动进入高清时代?

实践是检验真理的唯一标准&#xff0c;技术是行业进步的核心动能。在实时互动的新时代里&#xff0c;不断进化的声网已然完成自证。 作者|斗斗 出品|产业家 “一个医疗行业的客户&#xff0c;曾向我们提出一个需求&#xff0c;希望在120急救场景下&#xff0c;可以远程看清…

.net 6 efcore一个model映射到多张表(非使用IEntityTypeConfiguration)

现在有两张表&#xff0c;结构一模一样&#xff0c;我又不想创建两个一模一样的model&#xff0c;就想一个model映射到两张表 废话不多说直接上代码 安装依赖包 创建model namespace oneModelMultiTable.Model {public class Test{public int id { get; set; }public string…

两数相加 II

给你两个 非空 链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每个节点只存储一位数字。将这两数相加会返回一个新的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数字都不会以零开头。 示例1&#xff1a; 输入&#xff1a;l1 [7,2,4,3], l2 [5,6,4] 输…

React Native元素旋转一定的角度

mMeArrowIcon: {fontSize: 30, color: #999, transform: [{rotate: 180deg}]},<Icon name"arrow" style{styles.mMeArrowIcon}></Icon>参考链接&#xff1a; https://reactnative.cn/docs/transforms https://chat.xutongbao.top/

子组件未抛出事件 父组件如何通过$refs监听子组件中数据的变化

我们平时开发项目会使用一些比较成熟的组件库, 但是在极小的情况下,可能会出现我们需要监听某个属性的变化,使我们的页面根据这个属性发生一些改变,但是偏偏组件库没有把这个属性抛出来,当我们使用watch通过refs监听时,由于生命周期的原因还不能拿到,这时候我们可以这样做,以下…

《TCP IP 网络编程》第十五章

第 15 章 套接字和标准I/O 15.1 标准 I/O 的优点 标准 I/O 函数的两个优点&#xff1a; 除了使用 read 和 write 函数收发数据外&#xff0c;还能使用标准 I/O 函数收发数据。下面是标准 I/O 函数的两个优点&#xff1a; 标准 I/O 函数具有良好的移植性标准 I/O 函数可以利用…

安卓:BottomNavigationBar——底部导航栏控件

目录 一、BottomNavigationBar介绍 二、BottomNavigationBar的常用方法及其常用类 &#xff08;一&#xff09;、常用方法 1. 添加菜单项 2. 移除菜单项 3. 设置选中监听器 4. 设置当前选中项 5. 设置徽章 6. 样式和颜色定制 7. 动画效果 8. 隐藏底部导航栏。 9、设…

过程:从虚拟机上添加 git 并成功提交到 GitLab 的全过程

Ⅰ、准备工作&#xff1a; 1、Git 查看&#xff1a; 其一、命令&#xff1a;git --version // 此时就能在虚拟机环境下看到 git 的版本为: git version 2.41.0 其二、如何在虚拟机上安装 git &#xff1a; A、命令 &#xff1a; sudo apt-get install git B、然后再输入虚…

小研究 - 主动式微服务细粒度弹性缩放算法研究(三)

微服务架构已成为云数据中心的基本服务架构。但目前关于微服务系统弹性缩放的研究大多是基于服务或实例级别的水平缩放&#xff0c;忽略了能够充分利用单台服务器资源的细粒度垂直缩放&#xff0c;从而导致资源浪费。为此&#xff0c;本文设计了主动式微服务细粒度弹性缩放算法…

React 之 Redux - 状态管理

一、前言 1. 纯函数 函数式编程中有一个非常重要的概念叫纯函数&#xff0c;JavaScript符合函数式编程的范式&#xff0c;所以也有纯函数的概念 确定的输入&#xff0c;一定会产生确定的输出 函数在执行过程中&#xff0c;不能产生副作用 2. 副作用 表示在执行一个函数时&a…

Docker实战-关于Docker镜像的相关操作(一)

导语   镜像&#xff0c;Docker中三大核心概念之一&#xff0c;并且在运行Docker容器之前需要本地存储对应的镜像。那么下面我们就来介绍一下在Docker中如何使用镜像。 如何获取镜像&#xff1f; 镜像作为容器运行的前提条件&#xff0c;在Docker Hub上提供了各种各样的开放的…

Edge浏览器安装vue devtools

1. 下载地址 GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications. 2. 下载后的压缩包解压并打开文件夹&#xff0c;右键选择&#xff1a;git bush here 3. 安装依赖 npm install 4. 成功安装依赖后打包 npm run build

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

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

基于opencv的几种图像滤波

一、介绍 盒式滤波、均值滤波、高斯滤波、中值滤波、双边滤波、导向滤波。 boxFilter() blur() GaussianBlur() medianBlur() bilateralFilter() 二、代码 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> …

OpenLayers入门,OpenLayers使用fetch加载并显示TopoJson格式区划边界数据并叠加文字标注,动态创建要素样式

专栏目录: OpenLayers入门教程汇总目录 前言 上一章中已经说明了TopoJson格式数据,《OpenLayers入门,OpenLayers加载TopoJson数据,使用行政区划边界作为示例》,大家应该都已经有所了解。 本章在上一章基础上改用fetch加载TopoJson格式数据,并手动解析数据为Feature要素…

【GITHUB】FlipIt – Windows的开源翻页时钟

FlipIt 是一款免费开源的翻页时钟应用&#xff0c;专为 Windows 平台设计。该应用灵感来源于备受喜爱的老牌翻页时钟应用 Fliqlo&#xff0c;后者被公认为经典的翻页时钟屏保。然而&#xff0c;由于 Fliqlo 是基于 Flash 技术开发的&#xff0c;随着微软最近正式禁用 Flash&…