zx_flk_app/pages/travelingTrack/travelingTrack.vue

<template>
	<view class="container">
		<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>
		<view class="car-info">
			<view class="info-top flex-row flex-between">
				<view class="top-left">
					<view>{{trackInfo.car_name}}</view>
					<view>{{trackInfo.license_plate_num}}</view>
				</view>
				<view><img src="https://qiniu.bms16.com/FguJzvAGtd4AdhDKXVLUo7XiMxWQ" /></view>
			</view>
			<view class="ctime">{{tools.formatTime(trackInfo.hire_begin_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>行驶里程</view>
				</view>
				<view class="bottom-item">
					<view>{{tools.toFix(trackInfo.using_time/3600)}}<text>h</text></view>
					<view>骑行时长</view>
				</view>
				<view class="bottom-item">
					<view>{{trackInfo.avg_speed}}<text>km/h</text></view>
					<view>平均时速</view>
				</view>
				<!-- <view class="bottom-item">
					<view>40.0<text>g</text></view>
					<view>减少碳排量</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>
	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 {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				// markers: [],
				mapParams: {
					enableSatellite: false,
					// 是否开启卫星图
					enableTraffic: false // 是否开启实时路况
				},
				myInfo: {},
				myLocation: {
					latitude: 39.910925,
					longitude: 116.413384,
				},
				star_address: '',
				end_address: '',
				address: {},
				scale: 16,
				devicelist: [],
				devs: [],
				pointsList: [],
				points: [],
				pointIndex: 0,
				isPageUnloaded: false,
				polylines: [], // 路线
				markers: [], // 标记点
				trackInfo: {},
				plate_number: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log(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) {
				// 如果本地有存储的定位信息，则直接使用
				me.setData({
					myLocation: storedLocation
				})
				me.loadTrackInfo()
			} else {
				me.getLocationAndSave();
			}
			this.init()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		methods: {
			async init() {
				let {
					data
				} = await request.postApi(config_gyq.API_DEVICE_TRACK, {
					"macid": "013656219992",
					"from": 1742572800,
					"to": 1742659199,
					"language": ""
				})
				console.log(data)
			},
			loadTrackInfo() {
				const me = this
				http.postApi(config.API_DAYHIRE_CAR_TRACK_INFO, {
					plate_number: this.plate_number
				}, (resp) => {
					if (resp.data.code === 200) {
						me.trackInfo = resp.data.data
						me.pointsList = resp.data.data.points
						//接口返回描绘线段
						me.polylines = [{
							points: resp.data.data.points,
							color: "#0BD28E",
							width: 6
						}]
						if (me.pointsList.length >= 2) {
							const len = me.pointsList.length - 1
							//点收尾标记
							me.markers = [{
								id: 1,
								latitude: me.pointsList[0].latitude,
								longitude: me.pointsList[0].longitude,
								iconPath: 'https://qiniu.bms16.com/Fo5xXb4G6AEQpRcqZybvV29jVvIw',
								width: 30,
								height: 40
							}, {
								id: 2,
								latitude: me.pointsList[len].latitude,
								longitude: me.pointsList[len].longitude,
								iconPath: 'https://qiniu.bms16.com/FgfUVOFAeY-tXUilteSpVem3HTb7',
								width: 30,
								height: 34
							}]
							me.getAddressName(me.pointsList[0].latitude, me.pointsList[0].longitude, 1)
							me.getAddressName(me.pointsList[len].latitude, me.pointsList[len].longitude, 2)
						} else {
							me.markers = [{
								id: 2,
								latitude: me.pointsList[0] ? me.pointsList[0].latitude : me.myLocation
									.latitude,
								longitude: me.pointsList[0] ? me.pointsList[0].longitude : me.myLocation
									.longitude,
								iconPath: 'https://qiniu.bms16.com/FgfUVOFAeY-tXUilteSpVem3HTb7',
								width: 48,
								height: 52
							}]
							// 这里的markers的length只为1
							me.getAddressName(me.markers[0].latitude, me.markers[0].longitude, 1)
						}
						console.log(me.markers, 'me.markers');
					} else {
						// 默认返回上一个页面再提示报错
						// uni.navigateBack({
						// 	delta: 1
						// })
						common.simpleToast(resp.data.msg)
					}
				})
			},

			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
						}
						me.setData({
							myLocation: myLocation
						})
						me.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>