CarRental/page_user/carMap.vue

<template>
	<view class="page">
		<u-navbar title="车辆地图" :border-bottom="false" :background="background" title-color='#000' title-size='36'
			height='45' back-icon-color='#000'></u-navbar>
		<view class="map_box">
			<map class="map" id="map" ref="map" style="width: 100%; height:100%;overflow: hidden;" :latitude="latitude" :show-location="true"
				:longitude="longitude" :markers="markers"></map>
			
		</view>
		<view class="getlocation" @click="setMapScale">
			<image src="https://lxnapi.ccttiot.com/bike/img/static/u2q5QaMiiXpmAY7mcz96"/>
		</view>
		<view class="botInfo">
				<view class="botInfo_top">
					<view class="location">福建省宁德市福鼎市海滨路200号 靠近福鼎第四中学</view>
					<view class="ring" @click="ring">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uYFi5lWYkTjTbI6976Oi" ></image>
					</view>
				</view>
				<view class="botInfo_bottom">
					<view class="left_time">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uU1jtXf3uzCg1JEstCea"	/>
						17:42
					</view>
					车辆最后定位时间
				</view>
				<view class="btns" @click="navToCar">导航到车</view>
			</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: "#fff",
			},
			latitude: 0,
			longitude: 0,
			markers: [],
			deviceInfos: {}
		}
	},
	onLoad(e) {
		if (e.sn) {
			this.sn = e.sn
			this.getDeviceInfo()
		}

	},
	methods: {
		async setMapScale(e, val) {
				console.log('调用了校验');
				let mapContext = uni.createMapContext('map', this);
				let setScale = () => {
					return new Promise((resolve, reject) => {
						mapContext.getScale({
							success: r => {
								resolve()
							}
						})
					})
				};
				await setScale();
				mapContext.moveToLocation({
					success: (res) => {
						const timer = setTimeout(() => {
							clearTimeout(timer);
						}, 500);
					},
				})
			},
		navToCar(){
			console.log('点击了');
				uni.openLocation({
					latitude: parseFloat(this.deviceInfos.latitude),
					//纬度 - 目的地/坐标点
					longitude: parseFloat(this.deviceInfos.longitude),
					//经度 - 目的地/坐标点
					// name: "荆门市",
					address: this.deviceInfos.deviceName
				});
		},
		ring(){
			this.$u.post('app/device/ring?sn=' + this.deviceInfos.sn).then((res) => {
					if (res.code == 200) {
						
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						
					}
				})
		},
		getDeviceInfo() {
			this.$u.get('/appVerify/getDeviceBySn?sn=' + this.sn).then(res => {
				console.log(res);
				if (res.code == 200) {
					this.latitude = res.data.latitude
					this.longitude = res.data.longitude
					this.deviceInfos = res.data
					this.markers.push({
						id: parseFloat(this.sn),
						latitude: parseFloat(this.deviceInfos.latitude),
						longitude: parseFloat(this.deviceInfos.longitude),

						width: 49,
						height: 114 / 2,

						iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uhmzfPtuFGybfWcZq61q'

					})
				}
			})
		}

	}
}
</script>

<style lang="scss">
.page {
	width: 750rpx;
	.getlocation{
		position: fixed;
		bottom: 520rpx;	
		right: 28rpx;
		width: 90rpx;
			height: 90rpx;
		image{
			width: 90rpx;
			height: 90rpx;
		}
	}
	.botInfo{
		position: fixed;
		bottom: 0;	
		left: 0;
		width: 100%;
		padding: 40rpx 31rpx 58rpx 31rpx;
		background-color: #fff;
		.btns{	
			margin-top: 46rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 688rpx;
			height: 92rpx;
			background: #4297F3;
			box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
		}
		.botInfo_bottom{
			margin-top: 38rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			width: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
			.left_time{

				margin-right: 16rpx;
				display: flex;
				align-items: center;	
				// justify-content: center;
				width: 142rpx;	
				height: 46rpx;
				background: #EFEFEF;
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				padding: 6rpx 18rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				image{
					margin-right: 10rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.botInfo_top{
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			.location{
				width: 85%;
				font-weight: 700;
				font-size: 36rpx;
				color: #3D3D3D;
			}
			.ring{
				width: 15%;
				image{
					width: 90rpx;
					height: 90rpx;
				}
			}
		}
	}
	.map_box {
		width: 100%;
		height: 100vh;
	}
}
</style>