shanxian-work-app/pages/index/car_position.vue

<template style="height: 100%;">
	<view class="carPosition">
		<view class="position-top">
			<view class="child">
				<view class="children1" style="width: 60%;">
					<picker mode="date" :value="startTime" @change="start" style="font-size: 28upx;">
						开始时间：{{startTime}}
					</picker>
					<picker mode="date" :value="endTime" @change="end" style="font-size: 28upx;">
						结束时间：{{endTime}}
					</picker>
				</view>
				<view class="children1" style="width: 30%;">
					<view class="btn" @click="show">显示轨迹</view>
					<view class="btn" @click="hidn">清除轨迹</view>
				</view>
			</view>
			<view class="hint">
				<text class="color"></text>
				<text>用户骑行</text>
				<text class="color color1"></text>
				<text>运维骑行</text>
				<text class="color color2"></text>
				<text>未骑行</text>
			</view>
		</view>
		<map id="map" :longitude="longitude" :latitude="latitude" scale="14" :controls="controls" :markers="markers"
		 :polyline="polyline" style="width: 100%; position: absolute;bottom: 0;left: 0;" :style="{height:mapHeight-117 + 'px'}"></map>
	</view>
</template>
<script>
	var app = getApp()
	export default {
		data() {
			return {
				markers: [],
				polyline: [],
				controls: [],
				hasEmptyGrid: false,
				bikeId: '',
				bike_no: '',
				longitude: '',
				latitude: '',
				mapHeight: "", //地图高度
				startTime: "12", //开始时间  默认昨天
				endTime: "12", //结束时间  默认今天
			}
		},
		onLoad: function(options) {
			console.log(options)
			this.bikeId = options.id,
				this.bike_no = options.bike_no,
				this.getPosition();
			this.timeInit();
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowHeight, "999")
					this.mapHeight = res.windowHeight
				}
			})
		},
		methods: {
			getPosition: function() {
				uni.showLoading({
					title: '获取位置中...',
				})
				let data = {
					bike_no: this.bike_no
				}
				app.request('bike/position', data, 'GET').then(res => {
					uni.hideLoading();
					console.log(res);
					if (res.statusCode == 200) {
						if (res.data[0] == 0) {
							uni.showToast({
								title: '暂无车辆最后位置信息~',
								icon: 'none'
							})
							uni.getLocation({
								type: 'gcj02',
								success: function(res) {
									var latitude = res.latitude
									var longitude = res.longitude
									this.longitude = longitude;
									this.latitude = latitude;
									console.log(res, 'jingwei')
								},
							})
						} else {
							let position = [];
							position[0] = {
								width: 32,
								height: 32,
								zIndex: 1111,
								iconPath: 'http://resource.weilaibike.com/common/start-location-mark-old.png',
								longitude: res.data[0],
								latitude: res.data[1]
							}
							this.markers = position;
							this.longitude = res.data[0];
							this.latitude = res.data[1];
						}
					}
				})
			},
			//初始化日期
			timeInit: function() {
				let that = this;
				let start = new Date();
				start.setTime(start.getTime() - 24 * 60 * 60 * 1000)
				let startTime = that.getTime(start)
				let tom = new Date();
				// tom.setTime(tom.getTime() + 24 * 60 * 60 * 1000);
				let end = that.getTime(tom);
				this.startTime = startTime;
				this.endTime = end;
				console.log(start)
				console.log(end)
			},
			//获取年月日 时分秒
			getTime: function(date) {
				var year = date.getFullYear();
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
				// var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
				// var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
				// var today = year + "-" + month + "-" + day + ' ' + hours + ":" + minute;
				var today = year + "-" + month + "-" + day;
				console.log(today)
				return today;
			},
			start(e) {
				console.log(e)
				this.startTime = e.detail.value;
				console.log(this.startTime)
			},
			end(e) {
				console.log(e)
				this.endTime = e.detail.value;
			},
			//显示轨迹
			show: function() {
				uni.showLoading({
					title: '加载中...',
				})

				let start = new Date(this.startTime).getTime();
				let end = new Date(this.endTime).getTime();
				if (start > end) {
					uni.showToast({
						title: '开始日期不能大于结束日期',
						icon: 'none'
					})
				} else {

					this.markers = []

					var data = {
						'bike_no': this.bike_no,
						'time_between[0]': this.startTime,
						'time_between[1]': this.endTime,
					}
					app.request('bike/bikeLocation', data, 'POST').then(res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							// console.log(res, '车辆位置')
							if (res.data == '') {
								uni.showToast({
									title: '暂无骑行轨迹~',
									icon: 'none'
								})
							} else {
								this.polyline = res.data.all_locations;
								this.markers = res.data.points;
								console.log(this.markers)
							}
						}
					})
				}
			},
			//清除轨迹
			hidn() {
				let that = this;
				this.timeInit();
				this.polyline = [];
				this.markers = '';
			},
		}
	}
</script>
<style>
	uni-page-body,
	uni-page-refresh {
		height: 100vh;
		width: 100%;
		background: white !important;
	}

	.carPosition {
		background: #EDEDED;
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.position-top {
		/* 	margin-bottom: 10upx; */
		/* margin-top:10upx; */
		padding: 30upx 0rpx;
		border-top: 5upx solid #EDEDED;
		height: 200upx;
		background-color: #FFFFFF;
		position: absolute;
		top: 0upx;
		left: 0upx;
		width: 100%;
		/* box-sizing: border-box; */
		/* border-top: solid 1upx #8A8A8A; */
		/* background-color: #007AFF; */
	}

	.child {
		height: 90upx;
		display: flex;
		margin-bottom: 20upx !important;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 90%;
		margin: 0 auto;
	}

	.children1 {
		height: 70upx;
		line-height: 65upx;
		margin: 0 !important;
		padding: 0 !important;
	}

	.children1 picker {
		font: 24upx !important;
	}

	/* .date {
		width: 576upx;
		height: 224upx;
		background: #fff;
		border-radius: 20upx;
		padding: 20upx 60upx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 50upx !important;
	}
	.date view {
		font-size: 28upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	} */
	.btn {
		width: 200upx;
		font-size: 26upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		/* padding: 8upx 50upx; */
		background: #18d5b9;
		color: #fff;
		border-radius: 8upx;
		margin-left: 50upx;
	}

	.btn:first-child {
		margin-bottom: 10upx;
	}

	.van-icon-underway-o {
		font-size: 40upx !important;
	}

	.canlendarBgView {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.canlendarView {
		color: #66c;
		display: flex;
		flex-direction: column;
		z-index: 999;
		margin-top: 320upx;
		background: white;
	}

	.canlendarTopView {
		height: 80upx;
		font-size: 28upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.leftBgView {
		text-align: right;
		height: 80upx;
		display: flex;
		flex-direction: row-reverse;
	}

	.leftView {
		width: 80upx;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.centerView {
		width: 50%;
		height: 80upx;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.rightBgView {
		height: 80upx;
		display: flex;
		flex-direction: row;
	}

	.rightView {
		width: 80upx;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.weekBgView {
		height: 50upx;
		line-height: 50upx;
		opacity: 0.5;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.weekView {
		flex-grow: 1;
		text-align: center;
		font-size: 28upx;
	}

	.dateBgView {
		height: 500upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.dateEmptyView {
		width: 107.1428571429upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dateView {
		width: 107.1428571429upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.datesView {
		width: 60upx;
		height: 60upx;
		color: #66c;
		font-size: 26upx;
		font-weight: 200;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dateSelectView {
		border-radius: 50%;
		position: relative;
		left: 0;
		top: 0;
		color: #fff;
		background-color: #66c;
	}

	.hint {
		width: 500upx;
		background: #fff;
		height: 60upx;
		padding: 20upx 30upx 0 20upx;
		display: flex;
		align-items: center;
		border-radius: 10upx;
		margin: 0 auto;
	}

	.hint text {
		font-size: 26upx;
	}

	.color {
		display: inline-block;
		width: 30upx;
		height: 30upx;
		background: #18d3b8;
		margin: 0 10upx;
		border-radius: 50%;
	}

	.color1 {
		background: #ff6477;
	}

	.color2 {
		background: #d684dd;
	}
</style>