zx_flk_app/pages/travelingTrack/travelingTrack.vue

<template>
	<view class="container-view">
		<navBar :name="$t('最近骑行')" />
		<!-- #ifdef MP-WEIXIN -->
		<map class="my_app" id="myMap" :longitude="myLocation.longitude" :latitude="myLocation.latitude" :scale="scale"
			:markers="markers" :enable-satellite="mapParams.enableSatellite" :enable-traffic="mapParams.enableTraffic"
			show-location :polyline="polylines" enable-3D show-compass enable-overlooking @markertap="bindMarkertap"
			style="width: 100%;height: 50vh;">
		</map>
		<!-- #endif -->

		<!-- #ifdef APP -->
		<googleMap keyId="1" width="100%" height='calc(50vh - 0rpx)' v-if="myLocation.latitude  && mapShow" :mapData='{
			markers,
			zoom:17,
			type:3,
			polylines
		}' :myLocations='myLocation'></googleMap>
		<!-- #endif -->

		<view class="car-info">
			<view class="info-top flex-row flex-between">
				<view class="top-left f">
					<view>{{carInfo.car_name}}</view>
					<view>{{ $t('车牌号：') }}{{carInfo.license_plate_number}}</view>
				</view>
				<view>
					<image class="img"
						:src="carInfo.model_images || 'https://qiniu.bms16.com/FguJzvAGtd4AdhDKXVLUo7XiMxWQ'"
						mode="aspectFit"></image>
				</view>
			</view>
			<view class="ctime">{{time}}</view>
			<view class="info-center flex-row">
				<view class="center-left flex-row">
					<view></view>
					<view></view>
					<view></view>
				</view>
				<view class="center-right">
					<view class="address-name-style">{{star_address}}</view>
					<view class="address-name-style">{{end_address}}</view>
				</view>
			</view>
			<view class="info-bottom flex-row flex-between">
				<view class="bottom-item">
					<view>{{trackInfo.total_mil}}<text>km</text></view>
					<view>{{ $t('行驶里程') }}</view>
				</view>
				<view class="bottom-item">
					<view>{{tools.toFix((trackInfo.total_time || 0) / 60 / 60)}}<text>h</text></view>
					<view>{{ $t('骑行时长') }}</view>
				</view>
				<view class="bottom-item">
					<view>{{trackInfo.avg_speed}}<text>km/h</text></view>
					<view>{{ $t('平均时速') }}</view>
				</view>
				<!-- <view class="bottom-item">
					<view>40.0<text>g</text></view>
					<view>{{ $t('减少碳排量') }}</view>
				</view> -->
			</view>
		</view>
	</view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
<script>
	import googleMap from "@/component/googleMap/googleMap";
	var common = require('../../common/common.js');
	var amap = require('../../common/amap-wx.js');
	var config = require('../../common/config.js');
	var config_gyq = require('../../common/config_gyq.js');
	var http = require('../../common/http.js');
	var request = require('../../common/request.js');
	var storage = require('../../common/storage.js');
	export default {
		components: {
			googleMap,
		},
		data() {
			return {
				mapShow:false,
				time:this.$t('未知'),
				carInfo: {},
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				// markers: [],
				mapParams: {
					enableSatellite: false,
					// 是否开启卫星图
					enableTraffic: false // 是否开启实时路况
				},
				myInfo: {},
				star_address: '',
				end_address: '',
				address: {},
				scale: 16,
				devicelist: [],
				devs: [],
				pointsList: [],
				points: [],
				pointIndex: 0,
				isPageUnloaded: false,
				polylines: {}, // 路线
				markers: [], // 标记点
				trackInfo: {},
				plate_number: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			
			this.carInfo = uni.getStorageSync('car_info')
			this.plate_number = options.plate_number
			const me = this
			// common.loading();
			// const storedLocation = uni.getStorageSync('user_current_location');
			// if (storedLocation.longitude && storedLocation.latitude) {
			// 	// 如果本地有存储的定位信息，则直接使用
			// 	this.setData({
			// 		myLocation: storedLocation
			// 	})
			// 	// this.loadTrackInfo()
			// } else {
			// 	this.getLocationAndSave();
			// }
			this.init()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		methods: {
			async init() {
				let {
					data
				} = await request.postApi(config_gyq.API_CAR_TRACK_INFO, {
					car_sn: this.carInfo.car_sn,
				})
				
				if (data.code == 200) {
					this.trackInfo = data.data
					this.pointsList = data.data.points.map(item => {
						return {
							...item,
							lng: item.longitude,
							lat: item.latitude,
						}
					})
					
					if(this.pointsList.length < 1){
						common.simpleToast(this.$t('暂无骑行数据！'))
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 800);
						return 
					}
					
					//接口返回描绘线段
					
					this.polylines = {
						points: this.pointsList,
						color: "#0BD28E",
						width: 6
					}
					if(this.pointsList.length > 0){
						this.time = this.pointsList[0].time
					}
					if (this.pointsList.length >= 2) {
						const len = this.pointsList.length - 1
						//点收尾标记
						this.markers = [{
							id: 1,
							latitude: this.pointsList[0].latitude,
							longitude: this.pointsList[0].longitude,
							iconPath: 'https://qiniu.bms16.com/Fo5xXb4G6AEQpRcqZybvV29jVvIw',
							width: 30,
							height: 40
						}, {
							id: 2,
							latitude: this.pointsList[len].latitude,
							longitude: this.pointsList[len].longitude,
							iconPath: 'https://qiniu.bms16.com/FgfUVOFAeY-tXUilteSpVem3HTb7',
							width: 30,
							height: 34
						}]
						this.getAddressName(this.pointsList[0].latitude, this.pointsList[0].longitude, 1)
						this.getAddressName(this.pointsList[len].latitude, this.pointsList[len].longitude, 2)
					} else {
						this.markers = [{
							id: 2,
							latitude: this.pointsList[0] ? this.pointsList[0].latitude : this.myLocation
								.latitude,
							longitude: this.pointsList[0] ? this.pointsList[0].longitude : this.myLocation
								.longitude,
							iconPath: 'https://qiniu.bms16.com/FgfUVOFAeY-tXUilteSpVem3HTb7',
							width: 48,
							height: 52
						}]
						// 这里的markers的length只为1
						this.getAddressName(this.markers[0].latitude, this.markers[0].longitude, 1)
					}

					this.mapShow = true
				}
			},
			getAddressName(latitude, longitude, type) {
				const pData = {
					lng: longitude,
					lat: latitude,
					pi: "wx_index"
				}
				const that = this
				http.postApi(config.API_MAP_REGEO, pData, (resp) => {
					if (resp.data.code === 200) {
						if (type == 1) {
							that.star_address = resp.data.data.data.address
							// that.setData({
							// 	star_address: resp.data.data.data.address
							// });
						} else {
							that.setData({
								end_address: resp.data.data.data.address
							});
						}
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},

			getLocationAndSave: function() {
				const me = this;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						uni.hideLoading();
						var myLocation = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						this.setData({
							myLocation: myLocation
						})
						// this.loadTrackInfo()
						uni.setStorageSync('user_current_location', myLocation);
					},
					fail: function(res) {
						uni.hideLoading();
					},
					complete: function(res) {
						uni.hideLoading();
					}
				});
			},

			navToPage(e) {
				const url = e.currentTarget.dataset.url;
				if (!url) {
					return;
				}
				uni.navigateTo({
					url: url
				});
			},
		}
	};
</script>

<style>
	@import './travelingTrack.css';
</style>