flinfo/dc-App/pages/busNavigation/busNavigationBack.vue

<template>
	<view class="">
		<map id="map" :enable-traffic="true"   :enable-poi="true"  :enable-building="true"  :enable-indoorMap="true" :polyline="polyline" lang="en" :longitude="center.longitude" :latitude="center.latitude"
			:scale="scale" :controls="controls" :markers="markers" bindmarkertap="handleMarkerTap" show-location
			:style="'width:' + windowWidth + 'px;' + 'height:'+ windowHeight+'px;' ">
		</map>
		<view class="top_">
			<view class="top_buttom">
				<image src="/static/imgs/navgation.png" style="width: 40rpx; height: 40rpx;margin-right: 5px; "></image>
				<view class=""> <text class="wt_size" > {{routeTitle}}</text> </view>
	
			</view>
		</view>
		<view class="bottom_">
		
			<view class="bottom_right">
				<text class="c_text">distance: {{distance.toFixed(2)}} KM</text>
				<text class="c_text" style="color: #a1a1a1;">time: {{duration.toFixed(2)}} min</text>
			</view>
			<view class="bottom_left" @click="goback()">
				<view class="">
					<image src="/static/imgs/kg.png" style="width: 16px; height: 16px; margin-right: 5px; "></image>
				</view>
				<view class=""> <text style="font-size: 14px; ">exit</text> </view>
			</view>
			

		</view>
	</view>
</template>

<script>
	import request from '../../utils/request'
	import config from '@/config'
	export default {
		data() {
			return {
				//打车预估路线
				polyline: [],
				center: {
					latitude: null,
					longitude: null
				},
				_mapContext: null,
				scale: 18,
				controls: [],
				markers: [],
				startPoint: [],
				endPoint: [],
				// 接口返回
				container: {},
				routeTitle:'',
				distance: 0,
				duration: 0,
				cost:0

			}
		},
		onLoad(option) {
			this.startPoint = option.startPoint.split(',')
			this.endPoint = option.endPoint.split(',')
			this.startExecution()
			

		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight;
			},
			windowWidth() {
				return uni.getSystemInfoSync().windowWidth;
			}

		},
		methods: {

			startExecution() {
				let that = this
				uni.showLoading({
					title: 'Loading...'
				});
					request({
						url: 'walkApi/getIntegratedRouteInfo',
						method: 'post',
						data: {
							startLocationLng: this.startPoint[0],
							startLocationLat: this.startPoint[1],
							endLocationLng: this.endPoint[0],
							endLocationLat: this.endPoint[1],
						}
					}).then(res => {
				
						that.duration = res.data.duration/60
						that.distance = res.data.walkingDistance/1000
						that.cost = res.data.cost
						let segments = res.data.segments
						//以起点作为中心点进行定位
						that.center.latitude =  segments[0].bus[0].departureStop.locationLat
						that.center.longitude =  segments[0].bus[0].departureStop.locationLng
						try{
							that.center.latitude = 	segments[0].walking.startLocationLat
							that.center.longitude =  segments[0].walking.startLocationLng
						}catch{
							
						}
						//先进行步行的线路展示
						that.polyline = []
						for (var item of segments) {
							let walking = item.walking
							if(walking&&walking.polyline){
								let item = {}
								item.color = '#00aa00'
								item.points = walking.polyline
								item.width = 18
								item.arrowLine = true
								item.arrowIconPath = config.
								that.polyline.push(item)
							}
						}
						
						//再进行公交的线路展示
						for (var item of segments) {
							let bus = item.bus
							if(bus&&bus.length>0){
								for (var busIt of bus){
									let item = {}
									item.color = '#5500ff'
									item.points = busIt.polyline
									item.width = 18
									item.arrowLine = true
									that.polyline.push(item)
								}
					
							}
						}
						
						console.log(that.polyline);
					
					
					}).finally(()=>{
						uni.hideLoading()
					})
			},
			goback() {
				uni.navigateBack()
			},

			beforeDestroy() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},

			// 对于 TabBar 类型页面还需要额外关注 onHide 钩子
			onHide() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.top_ {
		position: fixed;
		left: 0px;
		top: 00rpx;
		height: 200rpx;
		background: #32714F;
		box-sizing: border-box;
		padding-top: 100rpx;
		width: 750rpx;
		z-index: 999;
	}

	.top_buttom {
		flex-direction: row;
		align-items: center;
		
		box-sizing: border-box;
		padding: 0px 30rpx;
	}

	.bottom_ {
		position: fixed;
		bottom: 0px;
		left: 0px;
		height: 130rpx;
		width: 750rpx;
		z-index: 999;
		background: #fff;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 22px 22px 0px 0px;
	}

	.bottom_left {
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		padding-right: 30rpx;
		border: 1px solid #e2e2e2;;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 5px 10px;
		// border-right: 1px solid #e2e2e2;
	}

	.bottom_eright {
		box-sizing: border-box;
		padding: 30rpx;
	}

	.bottom_right {

		// flex-direction: row;
		// align-items: center;
		// justify-content: space-around;
	}

	.c_text {
		font-weight: bold;
		font-size: 16px;
		margin: 0px 10px;
	}

	.scroll-container {
		height: 200rpx;
		/* 设定固定的高度 */
		overflow: hidden;
		backface-visibility: hidden;
		transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
	}

	.item-list {
		width: 700rpx;
		height: 90rpx;
		/* 设定固定的高度 */
		overflow: hidden;
		backface-visibility: hidden;
		transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;

		/* 启用原生滚动特性 */
		-webkit-overflow-scrolling: touch;

		/* 当内容超出了设定的高度，则允许内部内容滚动 */
		overflow-y: auto;
	}

	.list-item {
		width: 700rpx;
		padding: 10rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 6px;
	}

	.wt_size {
		color: #fff;
		font-size: 18px;
	}
</style>