更新

BagStation/pages/newRoutePlanning/chooseLocation.vue

@@ -54,26 +54,31 @@
 				pageSize: {
 					page_size: 15,
 					page: 1
-				}
+				},
+				currentMidwayIndex: '',
+				midwayPointList: ''
 			}
 		},
 		onLoad(e) {
-			let that = this
+			// let that = this
 			if (e.type) {
-				console.log(e.type)
-				this.type = e.type.split('/')[0]
-				this.location = e.type.split('/')[1]
-				console.log(this.List, Boolean(Number(this.List)))
+				let arr = e.type.split('/')
+				this.type = arr[0]
+				this.location = arr[1]
+				this.currentMidwayIndex = arr[2]
+				this.midwayPointList = arr[3]
+
+				// console.log(this.List, Boolean(Number(this.List)))
 				this.TXSDK.reverseGeocoder({
 					sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
-					location: that.location,
-					success(e) {
+					location: this.location,
+					success: (e) => {
 						({
-							province: that.addressData.province,
-							city: that.addressData.city,
-							district: that.addressData.area
+							province: this.addressData.province,
+							city: this.addressData.city,
+							district: this.addressData.area
 						} = e.result.address_component)
-						console.log(e, that.addressData, '地址逆解析')
+						// console.log(e, this.addressData, '地址逆解析')
 					},
 					fail(e) {
 						console.log(e, '地址逆解析 错误')
@@ -88,7 +93,7 @@
 		},
 		methods: {
 			seleClick(e) {
-				uni.$emit('UpdateAddress', e, this.type)
+				uni.$emit('UpdateAddress', e, this.type, this.currentMidwayIndex, this.midwayPointList)
 				uni.navigateBack()
 			},
 			chargeChange(e) {
@@ -144,12 +149,12 @@
 				})
 			},
 			getSuggestion() {
-				if(!this.seachValue) {
+				if (!this.seachValue) {
 					uni.showToast({
-						title:'还没有输入地址哦~',
-						icon:'none'
+						title: '还没有输入地址哦~',
+						icon: 'none'
 					})
-					return 
+					return
 				}
 				this.loding(true)
 				this.TXSDK.getSuggestion({

BagStation/pages/newRoutePlanning/components/addressSelector.vue

@@ -7,13 +7,25 @@
 				<!-- <uni-icond  type="back" size="30"></uni-icond> -->
 			</view>
 			<view class=" flex sele_car_right">
-				<view @click="chooseLocation('start')" class=" Padding flex ac flexone">
+
+				<view @click="chooseLocation('start')" class=" Padding flex ac flexone height79">
 					<view class="yuan" />
 					<view class="flexone margin size">{{Route.start.title}}</view>
 				</view>
-				<view @click="chooseLocation('end')" class=" Padding addressInput flex ac flexone">
+
+				<view v-for="item,index in midwayPointList" :key="index"
+					@click="chooseLocation('midwayPoint',index)" class=" Padding addressInput flex ac flexone height79">
+					<view style="background-color: #32CD32;" class="yuan" />
+					<view class="flexone margin size">{{item.title || '请输入途经点'}}</view>
+					<image @click.stop="removeLocation(index)" class="remove" src="../../../static/img/remove.png"></image>
+				</view>
+
+				<view @click="chooseLocation('end')" class=" Padding addressInput flex ac flexone height79">
 					<view style="background-color: #FF6700;" class="yuan" />
 					<view class="flexone margin size colorb">{{Route.end.title||'请输入终点'}}</view>
+					<image v-if="midwayPointList.length <= 1" @click.stop="additionLocation"
+						:style="{'top':midwayPointList.length?'50%':'0'}" class="addition"
+						src="../../../static/img/addition.png"></image>
 				</view>
 			</view>
 		</view>
@@ -62,6 +74,7 @@
 				isShow: {
 					conditions: false
 				},
+				midwayPointList: [],
 				header: null,
 				menuList: [{
 						title: '距离',
@@ -106,7 +119,6 @@
 		},
 		mounted() {
 			this.styles = uni.getMenuButtonBoundingClientRect();
-			console.log(this.styles);
 			const query = uni.createSelectorQuery().in(this);
 			query.select('.header').boundingClientRect(data => {
 				console.log("得到布局位置信息" + JSON.stringify(data));
@@ -116,9 +128,21 @@
 		},
 		created() {
 			this.getConditionMenu();
-
 		},
 		methods: {
+			removeLocation(index) {
+
+				this.midwayPointList.splice(index, 1)
+				this.$parent.passiveRedraw(this.midwayPointList)
+				
+			},
+			additionLocation() {
+				this.midwayPointList.push({
+					longitude: '',
+					latitude: '',
+					title: ''
+				})
+			},
 			getElement() {
 				return this.styles.top + this.styles.height + 10 + this.header.height
 			},
@@ -160,7 +184,7 @@
 					[this.menuList[0], this.menuList[1], this.menuList[2], this.menuList[3]] = [this.menuList[0],
 						this.menuList[3], this.menuList[1], this.menuList[2]
 					];
-					console.log(this.menuList, '***')
+					// console.log(this.menuList, '***')
 				})
 			},
 			datassFn() {
@@ -178,10 +202,10 @@
 				e.SublistOpen = !e.SublistOpen;
 				this.$emit('closeFooterScroll')
 			},
-			chooseLocation(e) {
+			chooseLocation(e, index) {
 				uni.navigateTo({
 					url: './chooseLocation?type=' +
-						`${e}/${this.Route.start.latitude},${this.Route.start.longitude}`
+						`${e}/${this.Route.start.latitude},${this.Route.start.longitude}/${index}/${JSON.stringify(this.midwayPointList)}`
 				})
 			},
 			backFn() {
@@ -237,7 +261,11 @@
 		padding: 0 28rpx;
 	}
 
+
+
 	.addressInput {
+		margin: 7rpx 0;
+		position: relative;
 		background: #F0F0F0;
 		border-radius: 10px;
 	}
@@ -257,7 +285,22 @@
 	}
 
 	.flexone {
-		flex: 1;
+		position: relative;
+		/* flex: 1; */
+	}
+
+	.addition,
+	.remove {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		right: -52rpx;
+		width: 42rpx;
+		height: 42rpx;
+	}
+
+	.height79 {
+		height: 79rpx;
 	}
 
 	.yuan {
@@ -268,10 +311,11 @@
 	}
 
 	.sele_car_right {
+		/* 		position: relative; */
 		flex-direction: column;
-		flex: 1;
-		/* padding: 0 27.2rpx; */
 		padding-left: 27.2rpx;
+		width: 100%;
+
 	}
 
 	.flex {
@@ -287,10 +331,10 @@
 	}
 
 	.sele_car {
-		height: 194rpx;
+		/* height: 194rpx; */
 		background: #FFFFFF;
 		border-radius: 10px;
-		padding: 18rpx 32rpx;
+		padding: 18rpx 37px 22rpx 32rpx;
 		display: flex;
 	}
 

BagStation/pages/newRoutePlanning/newRoutePlanning.vue

@@ -54,6 +54,7 @@
 						latitude: '',
 						title: ''
 					},
+					midwayPointList: [], //途径点list
 					end: {
 						longitude: '',
 						latitude: '',
@@ -90,6 +91,50 @@
 			}
 		},
 		methods: {
+			//监听更新位置事件
+			UpdateAddress() {
+				let that = this
+				uni.$on('UpdateAddress', (region, type, currentMidwayIndex, midwayPointList) => {
+					if (type === 'midwayPoint') {
+						let list = JSON.parse(midwayPointList)
+
+						list[currentMidwayIndex].longitude = region.location.lng
+						list[currentMidwayIndex].latitude = region.location.lat
+						list[currentMidwayIndex].title = region.title;
+
+
+						let addressSelector = this.$refs.addressSelector
+						addressSelector.midwayPointList[currentMidwayIndex].longitude = region.location.lng
+						addressSelector.midwayPointList[currentMidwayIndex].latitude = region.location.lat
+						addressSelector.midwayPointList[currentMidwayIndex].title = region.title;
+
+						this.Route.midwayPointList = list
+
+					} else {
+						this.Route[type].longitude = region.location.lng;
+						this.Route[type].latitude = region.location.lat;
+						this.Route[type].title = region.title;
+					}
+
+					this.Route['midwayPointList'].forEach((item, index) => {
+						if (!item.longitude || !item.latitude) {
+							this.$refs.addressSelector.midwayPointList.splice(index, 1)
+							this.Route.midwayPointList.splice(index, 1)
+						}
+					})
+
+
+
+					this.mapEventListeners('updateRoute', this.Route.start, this.Route.end)
+					this.mapEventListeners('UpdateLocation', this.Route, 'lately')
+				})
+			},
+			
+			passiveRedraw(midwayPointList) {
+				this.Route.midwayPointList = midwayPointList
+				this.mapEventListeners('updateRoute')
+			},
+			
 			perspectives(item) {
 				let {
 					latitude,
@@ -139,7 +184,7 @@
 						let {
 							oilProductCode, juLi, siteChannel
 						} = arguments[1];
-						let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
+						let markerList = await this.mapUpdateMarkers(this.polyline[2].points, oilProductCode, juLi,
 							siteChannel);
 						//处理站点数据回显
 
@@ -196,9 +241,10 @@
 			// 更新路线规划
 			async mapRoutePlanning(start = this.Route.start, end = this.Route.end, strategy = 'LEAST_TIME') {
 				// 获取路径
-				let res = await this.getMapRoutePlanning(start, end);
+				await this.routePlanning(start, end)
+				// let res = await this.getMapRoutePlanning(start, end);
 				//处理数据
-				this.polyline = this.RoutePlanningHandle(res);
+				// this.polyline = this.RoutePlanningHandle(res);
 				//缩放显示所有经纬度
 				this.zoomRoutePlanning();
 				// 获取筛选数据 更新油站站点
@@ -207,7 +253,8 @@
 					juLi,
 					siteChannel
 				} = this.$refs.addressSelector.datassFn();
-				let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
+
+				let markerList = await this.mapUpdateMarkers(this.polyline[2].points, oilProductCode, juLi,
 					siteChannel);
 
 				//处理油站站点数据并显示
@@ -235,18 +282,7 @@
 			closeAddressSelector() {
 				this.$refs.addressSelector.menuList.forEach(item => item.SublistOpen = false);
 			},
-			//监听更新位置事件
-			UpdateAddress() {
-				let that = this
-				uni.$on('UpdateAddress', function(region, type) {
-					// console.log(`%c ${(type=='start'?'起点更新':'终点更新')} 地址→ ${region.title}`,'color:red;font-size:50px')
-					that.Route[type].longitude = region.location.lng;
-					that.Route[type].latitude = region.location.lat;
-					that.Route[type].title = region.title;
-					that.mapEventListeners('updateRoute', that.Route.start, that.Route.end)
-					that.mapEventListeners('UpdateLocation', that.Route, 'lately')
-				})
-			},
+
 			//拉起导航
 			openMapApp() {
 				let that = this
@@ -265,10 +301,12 @@
 			},
 			//获取路线规划
 			getMapRoutePlanning(start, end) {
+				// this.routePlanning(start, end)
 				let {
 					seleIndex
 				} = this.$refs.footerScroll.$data
 
+
 				var _this = this;
 				return new Promise(function(res, rej) {
 					_this.TXSDK.direction({
@@ -278,7 +316,6 @@
 						to: end,
 						policy: seleIndex || 'LEAST_TIME',
 						success: function(e) {
-							console.log('获取路线规划成功')
 							res(e)
 						},
 						fail(e) {
@@ -289,24 +326,76 @@
 								});
 							}, 1000)
 							rej(e)
-							console.log('获取路线规划失败', e)
 						}
 					})
 				})
 			},
+
+
+			routePlanning(start, end) {
+				let threeLines = []
+
+				let {
+					seleIndex
+				} = this.$refs.footerScroll.$data
+
+				let waypoints = ''
+				if (this.Route.midwayPointList.length) {
+					this.Route.midwayPointList.forEach(item => {
+						waypoints += `${waypoints.length ? ';' : ''}${item.latitude},${item.longitude}`
+					})
+				}
+				let _transfer = (policy) => {
+					return new Promise((resolve, reject) => {
+						this.TXSDK.direction({
+							sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
+							mode: 'driving',
+							from: start,
+							to: end,
+							waypoints: waypoints,
+							policy: policy,
+							success: res => {
+								resolve(res)
+							}
+						})
+					})
+				}
+
+				let map = {
+					// 顺序会影响线层叠关系，越往后层级越高
+					'LEAST_TIME': [1, 2, 0],
+					'LEAST_FEE': [0, 2, 1],
+					'AVOID_HIGHWAY': [0, 1, 2]
+				}
+
+				return Promise.all([_transfer('LEAST_TIME'), _transfer('LEAST_FEE'), _transfer('AVOID_HIGHWAY')])
+					.then(res => {
+						let currentMap = map[seleIndex]
+						currentMap.forEach((item, index) => {
+							let currentRes = res[item]
+							let [result] = this.RoutePlanningHandle(currentRes)
+							if (index == 2) {
+								result.color = '#FF6700'
+							} else {
+								result.color = '#00BFFF'
+							}
+							threeLines.push(result)
+						})
+						this.polyline = threeLines
+					})
+			},
+
+
 			//获取到的路线规划数据进行处理
 			RoutePlanningHandle(res) {
-				var _this = this;
-				var ret = res;
-				var coors = ret.result.routes[0].polyline,
-					pl = [];
-				//坐标解压（返回的点串坐标，通过前向差分进行压缩）
-				var kr = 1000000;
-				for (var i = 2; i < coors.length; i++) {
-					coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr; 
+				let coors = res.result.routes[0].polyline
+				let pl = [];
+				//坐标解压（该方法为官方文档提供）
+				let kr = 1000000;
+				for (let i = 2; i < coors.length; i++) {
+					coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
 				}
-				//将解压后的坐标放入点串数组pl中
-				for (var i = 0; i < coors.length; i += 2) {
+				for (let i = 0; i < coors.length; i += 2) {
 					pl.push({
 						latitude: coors[i],
 						longitude: coors[i + 1],
@@ -318,8 +407,8 @@
 				return [{
 					points: pl,
 					color: '#FF6700',
-					width: 4,
-					distance: ret.result.routes[0].distance
+					width: 5,
+					distance: res.result.routes[0].distance
 				}]
 			},
 			/*  缩放路线规划 includePoints方法  points:经纬度数组  padding:边距  参考 https://uniapp.dcloud.io/api/location/map?id=cdreatemapcontext  */
@@ -356,7 +445,7 @@
 				console.log('点击地图')
 			},
 			//更新markers点
-			async mapUpdateMarkers(points = this.polyline[0].points, oilProductCode = '0#', juLi = '5', siteChannel = '') {
+			async mapUpdateMarkers(points = this.polyline[2].points, oilProductCode = '0#', juLi = '5', siteChannel = '') {
 				//标记
 				let {
 					latitude,
@@ -372,8 +461,8 @@
 					latitude: latitude || this.coordinate.latitude,
 					longitude: longitude || this.coordinate.longitude
 				}
-				let taht = this;
-				return new Promise(function(re, rj) {
+				// let taht = this;
+				return new Promise((re, rj) => {
 					oilSiteApi.getSiteByGeoHashNew(data).then(markerList => {
 						if (markerList.code !== 20000) {
 							setTimeout(() => {
@@ -385,7 +474,7 @@
 							rj(markerList.code + markerList.msg)
 							return
 						}
-						taht.selePrice = {
+						this.selePrice = {
 							middlePrice: markerList.data.middlePrice,
 							minPrice: markerList.data.minPrice
 						}
@@ -436,22 +525,18 @@
 			},
 			//点击定位点事件
 			markertap(e) {
-				console.log(e, '点击了ma')
+				console.log('点击了markertap')
 			},
 			//获取当前位置
 			getCurrentLocation() {
-				// let that = this
 				uni.getLocation({
 					type: 'gcj02',
 					success: (res) => {
-						// ({
-						// 	latitude: that.coordinate.latitude,
-						// 	longitude: that.coordinate.longitude
-						// } = res);
 						let {
 							latitude,
 							longitude
 						} = res
+
 						this.coordinate.latitude = latitude
 						this.firstLocation.latitude = latitude