MP_XOIL_company_new/BagStation/pages/newRoutePlanning/newRoutePlanning.vue

<template>
	<view>
		<!-- <image src="../../static/img/fj-qp.png" mode=" widthFix"></image> -->
		<addressSelector @closeFooterScroll='closeFooterScroll' ref='addressSelector'
			@mapEventListeners='mapEventListeners' :polyline="polyline" :Route="Route" />
		<footerScroll @closeAddressSelector='closeAddressSelector' @openMapApp='openMapApp' ref='footerScroll'
			:selePrice='selePrice' @dragMap='dragMap' :details='details' :polyline="polyline"
			@mapEventListeners='mapEventListeners' :markers="markers" />
		<view class="map_body">
			<map @bindregionchange='bindregionchange' @tap='poitap' @updated='mapUpdated' :scale='mapScale'
				@callouttap='callouttap' :enable-scroll='enableScroll' @markertap='markertap' :polyline="polyline"
				subkey="UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN" layer-style='2' id="map_Id" :show-location="true"
				:markers="markers" class="map_xx" :latitude="coordinate.latitude" :longitude="coordinate.longitude">
				<cover-view slot="callout">
					<cover-view v-for="(item,index) in markers" :key='index' class="customCallout" :marker-id="item.id">
						<cover-image style="width: 150rpx;height: 78rpx;position: absolute;"
							:src="item.imgCustomCallout">
						</cover-image>
						<cover-view class="customCallout_text">{{moneyIntercept(item.enterprisePrice) }}</cover-view>
					</cover-view>
				</cover-view>
			</map>
		</view>
	</view>
</template>
<script>
	import amapFile from '@/utils/qqmap-wx-jssdk.js'
	import addressSelector from './components/addressSelector.vue'
	import footerScroll from './components/footerScroll.vue'
	import oilSiteApi from '../../../api/oil-site.js'

	export default {
		components: {
			addressSelector,
			footerScroll
		},
		/*
		 * @property {Object}	coordinate:当前位置坐标点
		 * @property {Object}	markers:marker点
		 * @property {Object}	Route:路线规划 起点，终点 起点默认我的位置
		 * @property {Array}	polyline:路线
		 * @property {Function}	amapFile || TXSDK :腾讯SDK实例
		 * @property {Function}	mapContext:地图组件控制器
		 */
		data() {
			return {
				myLocation: null,
				TXSDK: null,
				polyline: [],
				//路线规划 起点终点数据 //起点默认是我的位置
				Route: {
					start: {
						longitude: '',
						latitude: '',
						title: ''
					},
					end: {
						longitude: '',
						latitude: '',
						title: ''
					}

				},
				enableScroll: true,
				coordinate: {
					longitude: '',
					latitude: '',
					title: '我的位置'
				},
				markers: [],
				mapContext: null,
				details: {},
				spareMarkers: [],
				selePrice: null,
				mapScale: 16
			}
		},
		onLoad(e) {
			this.initFn()
		},
		created() {
			this.TXSDK = new amapFile({
				key: 'UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN'
			});
		},
		watch: {
			enableScroll: function(n, o) {
				console.log('全局是否可拖动', n)
			}
		},
		methods: {
			perspectives(item) {
				let {
					latitude,
					longitude
				} = item
				setTimeout(() => {
					this.newMapMoveToLocation(longitude, latitude, 'reset')
				},500)
			},
			bindregionchange(e) {
				console.log(e, '***********')
			},
			mapUpdated(e) {
				let that = this
				console.log('更新', e);
				that.mapContext.getScale({
					success: function(e) {
						console.log(e, '当前缩放比例')
					}
				})
			},
			//初始化方法
			initFn() {
				this.mapContext = uni.createMapContext("map_Id", this);
				this.getCurrentLocation();
				this.UpdateAddress();
			},
			//地图更新事件监听 分发事件 
			async mapEventListeners(e) {
				switch (e) {
					case 'updateRoute':
						this.mapRoutePlanning(arguments[1] ? arguments[1] : this.Route.start, arguments[2] ? arguments[
							2] : this.Route.end, arguments[3] ? arguments[3] : 'LEAST_TIME')
						break;
					case 'UpdateLocation':
						this.UpdateLocation(arguments[1], arguments[2])
						break;
					case 'cardPlanning':
						this.Route = arguments[1]
						this.mapRoutePlanning()
						break;
					case 'details':
						// this.details.a = 1 ;
						let d = arguments[1]
						this.details = d;
						this.newMapMoveToLocation(this.details.longitude, this.details.latitude)
						break;
					case 'apiScreen':
						//接口更新站点 
						let {
							oilProductCode, juLi, siteChannel
						} = arguments[1];
						let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
							siteChannel);
						//处理站点数据回显

						this.spareMarkers = this.locationProcessing(markerList);
						this.markers = await this.filterMarkers(JSON.parse(JSON.stringify(this.spareMarkers)));
						break;
					case 'localScreen':
						// 手动筛选 备份下数据
						let markers = JSON.parse(JSON.stringify(this.spareMarkers));
						this.markers = await this.filterMarkers(markers);
						/* 老版更新价格  
						this.markers =  await this.filterMarkers(markers);
						if (arguments[1] !== 'footer') {
								if(filterData.highSpeed=='2'){
									console.log('全部',this.spareMarkers)
									this.markers =  JSON.parse(JSON.stringify(this.spareMarkers))
								}
								let sort = this.markers.sort((a, b) => {
									return a.enterprisePrice - b.enterprisePrice
								});
								console.log(sort,'排序之后的价格')
								if (sort.length !== 0) {
									this.selePrice = {
										middlePrice: sort[Number.isInteger((sort.length / 2)) ? (sort
												.length / 2)  : ((sort.length + 1) / 2) - 1]
											.enterprisePrice,
										minPrice: sort[0].enterprisePrice
									}
								} else {
									this.selePrice = {}
								}
						};
						 setTimeout(()=>{
						 	console.log('调整之后的价格',this.selePrice,arguments[1]!=='footer');
						 	this.markers = this.filterMarkers(this.markers,this.$refs.footerScroll.filter());
						 },0)
						*/

						break;
					case 'MoveToLocation':
						arguments[1] ? (this.newMapMoveToLocation(this.Route.start.longitude, this.Route.start
							.latitude, 'MoveToLocation')) : (this.zoomRoutePlanning());
						break;
					case 'reset':
						this.newMapMoveToLocation(this.myLocation.longitude, this.myLocation.latitude, 'reset')
						break;

				}
			},
			closeFooterScroll() {
				this.$refs.footerScroll.screenClose();
				this.$refs.footerScroll.mapIconClose();
			},
			// 更新路线规划
			async mapRoutePlanning(start = this.Route.start, end = this.Route.end, strategy = 'LEAST_TIME') {
				// 获取路径
				let res = await this.getMapRoutePlanning(start, end, strategy);
				//处理数据
				this.polyline = this.RoutePlanningHandle(res);
				//缩放显示所有经纬度
				this.zoomRoutePlanning();
				// 获取筛选数据 更新油站站点
				let {
					oilProductCode,
					juLi,
					siteChannel
				} = this.$refs.addressSelector.datassFn();
				let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
					siteChannel);
				//处理油站站点数据并显示
				this.spareMarkers = this.locationProcessing(markerList);
				let markers = JSON.parse(JSON.stringify(this.spareMarkers));
				this.markers = await this.filterMarkers(markers);
			},
			// 更新最近搜索
			UpdateLocation(Route, type) {
				let recentSearch = uni.getStorageSync('recentSearch') || [];
				let data = {
					...Route,
					type: type,
					id: `${Route.start.latitude}${Route.start.longitude}${Route.end.latitude}${Route.end.longitude}`
				};
				let key = recentSearch.map((item) => item.id);
				if (!key.includes(data.id)) {
					recentSearch.length !== 0 ? recentSearch[0].type == 'lately' ? recentSearch.splice(0, 1, data) :
						recentSearch.unshift(data) : recentSearch.push(data);
					uni.setStorageSync('recentSearch', recentSearch);
				}

			},
			//。。。。。。
			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
				wx.openLocation({
					latitude: that.details.latitude, // 纬度
					longitude: that.details.longitude, // 经度
					name: that.details.siteName, // 地址名称
					address: that.details.siteName, // 详细地址
					success: function(r) {
						console.log(r)
					},
					fail: function(res) {
						console.log('拉起失败啦', res)
					}
				})
			},
			//获取路线规划
			getMapRoutePlanning(start, end, strategy = 'LEAST_TIME') {
				var _this = this;
				return new Promise(function(res, rej) {
					_this.TXSDK.direction({
						sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
						mode: 'driving',
						from: start,
						to: end,
						policy: strategy,
						success: function(e) {
							console.log('获取路线规划成功')
							res(e)
						},
						fail(e) {
							setTimeout(() => {
								uni.showToast({
									title: e.msg,
									icon: "none"
								});
							}, 1000)
							rej(e)
							console.log('获取路线规划失败', e)
						}
					})
				})
			},
			//获取到的路线规划数据进行处理
			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;
				}
				//将解压后的坐标放入点串数组pl中
				for (var i = 0; i < coors.length; i += 2) {
					pl.push({
						latitude: coors[i],
						longitude: coors[i + 1],
						lat: coors[i],
						lon: coors[i + 1]
					})
				}
				//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
				return [{
					points: pl,
					color: '#FF6700',
					width: 4,
					distance: ret.result.routes[0].distance
				}]
			},
			/*  缩放路线规划 includePoints方法  points:经纬度数组  padding:边距  参考 https://uniapp.dcloud.io/api/location/map?id=cdreatemapcontext  */
			zoomRoutePlanning(points, padding) {
				let that = this
				let system = uni.getSystemInfoSync().platform;
				// setTimeout(()=>{
				// 	uni.showToast({
				// 		title: system, 
				// 		icon: 'none'
				// 	})
				// },1000)
				try {
					let paddingTop = this.$refs.addressSelector.getElement();
					this.mapContext.includePoints({
						points: points ? points : that.polyline[0].points,
						padding: system == 'ios' ? [paddingTop + 90, 30, 150, 30] : [paddingTop - 25, 30, 50, 30],
						// padding: padding ? padding : [50, 10, 50, 10],
						success: function(e) {}
					})

				} catch (e) {
					uni.showToast({
						title: e,
						icon: 'none'
					})
					//TODO handle the exception
				}
			},
			// 点击地图
			poitap() {
				if (this.polyline.length == 0) return;
				this.$refs.footerScroll.isShow.screen = true;
				this.$refs.footerScroll.isShow.serviceStation = false;
				this.enableScroll = true;
				this.$refs.addressSelector.menuList.forEach(item => item.SublistOpen = false);
				this.$refs.footerScroll.screenClose();
				this.$refs.footerScroll.mapIconClose();
				this.details = null;
				console.log('点击地图')
			},
			//更新markers点
			async mapUpdateMarkers(points = this.polyline[0].points, oilProductCode = '0#', juLi = '5', siteChannel = '') {
				let data = {
					geoList: points,
					oilProductCode: oilProductCode ? oilProductCode : '0#',
					juLi: juLi ? juLi : '5',
					siteChannel: siteChannel,
					countJuLi: points[0].distance,
					latitude: this.coordinate.latitude,
					longitude: this.coordinate.longitude
				}
				console.log(JSON.stringify(data))
				let taht = this;
				return new Promise(function(re, rj) {
					oilSiteApi.getSiteByGeoHashNew(data).then(markerList => {
						if (markerList.code !== 20000) {
							setTimeout(() => {
								uni.showToast({
									title: 'Error' + markerList.code + markerList.msg,
									icon: 'none'
								})
							}, 500)
							rj(markerList.code + markerList.msg)
							return
						}
						taht.selePrice = {
							middlePrice: markerList.data.middlePrice,
							minPrice: markerList.data.minPrice
						}
						re(markerList.data.siteGeoVoList)
					})
				})
			},
			//定位处理
			locationProcessing(markerList) {
				// console.log(markerList, '----')
				markerList.forEach((item, index) => {
					let configure = {
						siteId: item.id,
						id: Number(`${index}`),
						imgCustomCallout: this.olitype(item.siteChannel),
						iconPath: '../../static/img/tt.png',
						width: 5,
						height: 5,
						customCallout: {
							anchorX: 0,
							anchorY: 8,
							display: "ALWAYS"
						}
					}
					item = Object.assign(item, configure)
				});
				return markerList
			},
			//地图组件控件
			assembly() {},
			//点击气泡事件
			async callouttap(e) {
				let seleMark = this.markers.filter(item => item.id == e.detail.markerId);
				// this.enableScroll  = true
				let details = await oilSiteApi.getSiteDetails({
					latitude: String(this.coordinate.latitude),
					longitude: String(this.coordinate.longitude),
					siteId: seleMark[0].siteId
				});
				// console.log(details, '***')
				if (details.code !== 20000) {
					uni.showToast({
						title: details.msg,
						icon: 'none'
					})
					return
				}
				this.mapEventListeners('details', Object.assign(details.data, {
					id: seleMark[0].siteId
				}))
			},
			//点击定位点事件
			markertap(e) {
				console.log(e, '点击了ma')
			},
			//获取当前位置
			getCurrentLocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						({
							latitude: that.coordinate.latitude,
							longitude: that.coordinate.longitude
						} = res);
						that.myLocation = res;
						that.Route.start = Object.assign(that.Route.start, that.coordinate);
					}
				});
			},
			//移动当前中心点 参数:经纬度
			newMapMoveToLocation(longitude, latitude, type) {
				console.log('newMapMoveToLocation')
				let that = this
				this.mapContext.moveToLocation({
					longitude: longitude,
					latitude: latitude,
					success(e) {
						console.log(`移动 坐标→ ${longitude}-${latitude}`);
						if (type) {
							that.coordinate.latitude = latitude
							that.coordinate.longitude = longitude
							that.mapContext.getScale({
								success: function(e) {
									setTimeout(() => {
										that.mapScale = e.scale;
										setTimeout(() => {
											that.mapScale = 13
										}, 500)
									}, 500)
								}
							})
						}
					},
					fail(ee) {
						console.log('ee',ee)
					}
				})
			},
			addfn(e) {
				if (e !== null) {
					setTimeout(() => {
						this.newMapMoveToLocation(this.markers[e].longitude, this.markers[e].latitude);
						this.addfn(e < this.markers.length ? e + 1 : null);
					}, 1500)
				}

			},
			//价格排序
			priceSort(list) {
				let sort = list.sort((a, b) => {
					return a.enterprisePrice - b.enterprisePrice
				});
				return sort
			},
			//手动筛选
			filterMarkers(e, w) {
				let that = this
				return new Promise(function(re, rj) {
					w = that.$refs.addressSelector.datassFn();
					let filterMarkers = [];
					//第一步筛选 是否高速
					let highSpeedMarkers = Object.keys(w).includes('highSpeed') && w.highSpeed ? e.filter((item,
						index) => {
						return Number(w.highSpeed) == 2 ? item : item.highSpeedMark == Number(w.highSpeed)
					}) : e;
					
					let copy = JSON.parse(JSON.stringify(highSpeedMarkers))
					
					let sort = that.priceSort(copy);
					that.selePrice = sort.length !== 0 ? {
						middlePrice: sort[Number.isInteger((sort.length / 2)) ? (sort.length / 2) : ((sort
							.length + 1) / 2) - 1].enterprisePrice,
						minPrice: sort[0].enterprisePrice,
					} : {};
					// 获取更新之后的值 this.$nextTick()也行
					setTimeout(() => {
						w = Object.assign(w, that.$refs.footerScroll.filter());
					}, 0)
					//第二步筛选价格 
					setTimeout(() => {
						filterMarkers = Object.keys(w).includes('enterprisePrice') && w.enterprisePrice ?
							highSpeedMarkers.filter((item, index) => {
								return item.enterprisePrice <= Number(w.enterprisePrice)
							}) : highSpeedMarkers;
						re(filterMarkers)
					}, 0)
				})

			},
			copy(obj) {
				let newobj = null // 接受拷贝的新对象
				if (typeof(obj) == 'object' && typeof(obj) !== null) { // 判断是否是引用类型
					newobj = obj instanceof Array ? [] : {} // 判断是数组还是对象
					for (var i in obj) {
						newobj[i] = this.copy(obj[i]) // 判断下一级是否还是引用类型
					}
				} else {
					newobj = obj
				}
				return newobj
			},
			//拖动辅助控件
			dragMap(e, w) {
				let that = this
				this.enableScroll = w;
				console.log('辅助控件触发;是否可以拖动地图1>', that.enableScroll)
				this.newMapMoveToLocation(e.longitude, e.latitude)
				uni.$on('dragMap', function(e) {
					that.enableScroll = e
					console.log('辅助控件触发;是否可以拖动地图>', that.enableScroll)
				})
			}
		}
	}
</script>

<style scoped>
	@import url("./map.css");

	.map_xx {
		width: 100%;
		height: 100%;
	}
</style>