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

javascript 复制代码
//地图
		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-*********-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);
		},
html 复制代码
<map id="map1" :longitude="longitude" :latitude="latitude" :markers="markers" :scale="scale" :polyline="polyline"></map>
javascript 复制代码
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: []
				}
			] //
相关推荐
李纲明1 天前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐?getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy
dreams_dream1 天前
微信小程序-使用npm包
微信小程序·小程序·npm
L1mbo1 天前
Lite模式 缓解微信开发者工具卡顿,附 uni-app 实践方案
前端·微信小程序
caoliaoerweima1 天前
草料二维码小程序上线活码编辑器:手机上也能编辑活码了
智能手机·小程序·编辑器·草料二维码
大数据技术派2 天前
等了一周,我的摸鱼小程序终于微信认证通过了
微信小程序
CSharp精选营3 天前
记一次家庭物品管理的折腾:从“收纳”到“可检索”
微信小程序·aicoding·屋册有序·物品收纳管理·家庭收纳管理工具
dreams_dream4 天前
微信小程序:页面事件-上拉触底
微信小程序·小程序
鹏多多4 天前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
wafrdggh5 天前
2026电商快递批量查询怎么用?固乔助手模板设置评测
大数据·数据库·小程序
计算机毕设定制辅导-无忧学长5 天前
《基于微信小程序的居家医疗陪护预约系统设计与实现》
java·spring boot·微信小程序·uniapp·居家医疗陪护预约系统