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 http = require('../../common/http.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) {
			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();
			}
			
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
	
		},
		methods: {
			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>